From e642a7324c871f403ba713c79aa43773a954147e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 28 Feb 2024 13:11:25 +0300 Subject: [PATCH] Refactor --- src/app/components/iconfield/iconfield.css | 5 + src/app/components/iconfield/iconfield.ts | 20 +- src/app/components/inputicon/inputicon.css | 274 +----------------- .../inputicon/inputicon.interface.ts | 89 ------ src/app/components/inputicon/inputicon.ts | 24 +- src/app/showcase/doc/apidoc/index.json | 96 ++++-- src/app/showcase/doc/iconfield/basicdoc.ts | 28 +- .../pages/iconfield/iconfielddemo.html | 2 +- .../components/themes/arya-blue/theme.css | 16 + .../components/themes/arya-green/theme.css | 16 + .../components/themes/arya-orange/theme.css | 16 + .../components/themes/arya-purple/theme.css | 16 + .../themes/bootstrap4-dark-blue/theme.css | 16 + .../themes/bootstrap4-dark-purple/theme.css | 16 + .../themes/bootstrap4-light-blue/theme.css | 16 + .../themes/bootstrap4-light-purple/theme.css | 16 + .../components/themes/fluent-light/theme.css | 16 + .../themes/lara-dark-blue/theme.css | 16 + .../themes/lara-dark-indigo/theme.css | 16 + .../themes/lara-dark-purple/theme.css | 16 + .../themes/lara-dark-teal/theme.css | 16 + .../themes/lara-light-blue/theme.css | 16 + .../themes/lara-light-indigo/theme.css | 16 + .../themes/lara-light-purple/theme.css | 16 + .../themes/lara-light-teal/theme.css | 16 + .../components/themes/luna-amber/theme.css | 16 + .../components/themes/luna-blue/theme.css | 16 + .../components/themes/luna-green/theme.css | 16 + .../components/themes/luna-pink/theme.css | 16 + .../themes/md-dark-deeppurple/theme.css | 16 + .../themes/md-dark-indigo/theme.css | 16 + .../themes/md-light-deeppurple/theme.css | 16 + .../themes/md-light-indigo/theme.css | 16 + .../themes/mdc-dark-deeppurple/theme.css | 16 + .../themes/mdc-dark-indigo/theme.css | 16 + .../themes/mdc-light-deeppurple/theme.css | 16 + .../themes/mdc-light-indigo/theme.css | 16 + src/assets/components/themes/mira/theme.css | 16 + src/assets/components/themes/nano/theme.css | 16 + .../components/themes/nova-accent/theme.css | 16 + .../components/themes/nova-alt/theme.css | 16 + src/assets/components/themes/nova/theme.css | 16 + src/assets/components/themes/rhea/theme.css | 16 + .../components/themes/saga-blue/theme.css | 16 + .../components/themes/saga-green/theme.css | 16 + .../components/themes/saga-orange/theme.css | 16 + .../components/themes/saga-purple/theme.css | 16 + .../components/themes/soho-dark/theme.css | 16 + .../components/themes/soho-light/theme.css | 16 + .../themes/tailwind-light/theme.css | 16 + .../components/themes/vela-blue/theme.css | 16 + .../components/themes/vela-green/theme.css | 16 + .../components/themes/vela-orange/theme.css | 16 + .../components/themes/vela-purple/theme.css | 16 + .../components/themes/viva-dark/theme.css | 16 + .../components/themes/viva-light/theme.css | 16 + 56 files changed, 883 insertions(+), 423 deletions(-) create mode 100644 src/app/components/iconfield/iconfield.css delete mode 100644 src/app/components/inputicon/inputicon.interface.ts diff --git a/src/app/components/iconfield/iconfield.css b/src/app/components/iconfield/iconfield.css new file mode 100644 index 00000000000..7efe09a8a15 --- /dev/null +++ b/src/app/components/iconfield/iconfield.css @@ -0,0 +1,5 @@ +@layer primeng { + .p-icon-field { + position: relative; + } +} \ No newline at end of file diff --git a/src/app/components/iconfield/iconfield.ts b/src/app/components/iconfield/iconfield.ts index 31b1993f45a..44ce8e9a958 100755 --- a/src/app/components/iconfield/iconfield.ts +++ b/src/app/components/iconfield/iconfield.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, Input, NgModule } from '@angular/core'; +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; @@ -9,18 +9,24 @@ import { SharedModule } from 'primeng/api'; */ @Component({ selector: 'p-iconField', - template: ` `, - - host: { - class: 'p-element' - } + template: ` `, + styleUrl: './iconfield.css', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) export class IconField { /** * Position of the icon. * @group Props */ - @Input() iconPosition: 'right' | 'left' = 'right'; + @Input() iconPosition: 'right' | 'left' = 'left'; + + get containerClass() { + return { + 'p-icon-field-left': this.iconPosition === 'left', + 'p-icon-field-right': this.iconPosition === 'right' + }; + } } @NgModule({ diff --git a/src/app/components/inputicon/inputicon.css b/src/app/components/inputicon/inputicon.css index c996776c864..0e8f3cadbaf 100755 --- a/src/app/components/inputicon/inputicon.css +++ b/src/app/components/inputicon/inputicon.css @@ -1,276 +1,6 @@ @layer primeng { - .p-galleria-content { - display: flex; - flex-direction: column; - } - - .p-galleria-item-wrapper { - display: flex; - flex-direction: column; - position: relative; - } - - .p-galleria-item-container { - position: relative; - display: flex; - height: 100%; - } - - .p-galleria-item-nav { - position: absolute; - top: 50%; - margin-top: -0.5rem; - display: inline-flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-item-prev { - left: 0; - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - - .p-galleria-item-next { - right: 0; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - } - - .p-galleria-item { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - width: 100%; - } - - .p-galleria-item-nav-onhover .p-galleria-item-nav { - pointer-events: none; - opacity: 0; - transition: opacity 0.2s ease-in-out; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { - pointer-events: all; - opacity: 1; - } - - .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { - pointer-events: none; - } - - .p-galleria-caption { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - } - - /* Thumbnails */ - .p-galleria-thumbnail-wrapper { - display: flex; - flex-direction: column; - overflow: auto; - flex-shrink: 0; - } - - .p-galleria-thumbnail-prev, - .p-galleria-thumbnail-next { - align-self: center; - flex: 0 0 auto; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - position: relative; - } - - .p-galleria-thumbnail-prev span, - .p-galleria-thumbnail-next span { - display: flex; - justify-content: center; - align-items: center; - } - - .p-galleria-thumbnail-container { - display: flex; - flex-direction: row; - } - - .p-galleria-thumbnail-items-container { - overflow: hidden; - width: 100%; - } - - .p-galleria-thumbnail-items { - display: flex; - } - - .p-galleria-thumbnail-item { - overflow: auto; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - opacity: 0.5; - } - - .p-galleria-thumbnail-item:hover { - opacity: 1; - transition: opacity 0.3s; - } - - .p-galleria-thumbnail-item-current { - opacity: 1; - } - - /* Positions */ - /* Thumbnails */ - .p-galleria-thumbnails-left .p-galleria-content, - .p-galleria-thumbnails-right .p-galleria-content { - flex-direction: row; - } - - .p-galleria-thumbnails-left .p-galleria-item-wrapper, - .p-galleria-thumbnails-right .p-galleria-item-wrapper { - flex-direction: row; - } - - .p-galleria-thumbnails-left p-galleriaitem, - .p-galleria-thumbnails-top p-galleriaitem { - order: 2; - } - - .p-galleria-thumbnails-left p-galleriathumbnails, - .p-galleria-thumbnails-top p-galleriathumbnails { - order: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-container, - .p-galleria-thumbnails-right .p-galleria-thumbnail-container { - flex-direction: column; - flex-grow: 1; - } - - .p-galleria-thumbnails-left .p-galleria-thumbnail-items, - .p-galleria-thumbnails-right .p-galleria-thumbnail-items { - flex-direction: column; - height: 100%; - } - .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, - .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper { - height: 100%; - } - - /* Indicators */ - .p-galleria-indicators { - display: flex; - align-items: center; - justify-content: center; - } - - .p-galleria-indicator > button { - display: inline-flex; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-wrapper, - .p-galleria-indicators-right .p-galleria-item-wrapper { - flex-direction: row; - align-items: center; - } - - .p-galleria-indicators-left .p-galleria-item-container, - .p-galleria-indicators-top .p-galleria-item-container { - order: 2; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-top .p-galleria-indicators { - order: 1; - } - - .p-galleria-indicators-left .p-galleria-indicators, - .p-galleria-indicators-right .p-galleria-indicators { - flex-direction: column; - } - - .p-galleria-indicator-onitem .p-galleria-indicators { - position: absolute; - display: flex; - z-index: 1; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { - top: 0; - left: 0; - width: 100%; - align-items: flex-start; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { - right: 0; - top: 0; - height: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { - bottom: 0; - left: 0; - width: 100%; - align-items: flex-end; - } - - .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { - left: 0; - top: 0; - height: 100%; - align-items: flex-start; - } - - /* FullScreen */ - .p-galleria-mask { - position: fixed; - top: 0; - left: 0; + .p-fluid .p-icon-field-left, + .p-fluid .p-icon-field-right { width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-color: transparent; - transition-property: background-color; - } - - .p-galleria-close { - position: absolute; - top: 0; - right: 0; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - } - - .p-galleria-mask .p-galleria-item-nav { - position: fixed; - top: 50%; - margin-top: -0.5rem; - } - - .p-galleria-mask.p-galleria-mask-leave { - background-color: transparent; - } - - /* Keyboard Support */ - .p-items-hidden .p-galleria-thumbnail-item { - visibility: hidden; - } - - .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active { - visibility: visible; } } diff --git a/src/app/components/inputicon/inputicon.interface.ts b/src/app/components/inputicon/inputicon.interface.ts deleted file mode 100644 index 328a421abdd..00000000000 --- a/src/app/components/inputicon/inputicon.interface.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { TemplateRef } from '@angular/core'; -/** - * Responsive options of the component. - * @group Interface - */ -export interface GalleriaResponsiveOptions { - /** - * Breakpoint for responsive mode. Exp; @media screen and (max-width: ${breakpoint}) {...} - */ - breakpoint: string; - /** - * The number of visible items on breakpoint. - */ - numVisible: number; -} -/** - * Defines valid templates in Galleria. - * @group Templates - */ -export interface GalleriaTemplates { - /** - * Custom template of header. - */ - header(): TemplateRef; - /** - * Custom template of footer. - */ - footer(): TemplateRef; - /** - * Custom template of indicator. - * @param {Object} context - indicator data. - */ - indicator(context: { - /** - * Index of the item. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of closeicon. - */ - closeicon(): TemplateRef; - /** - * Custom template of itemnexticon. - */ - itemnexticon(): TemplateRef; - /** - * Custom template of itempreviousicon. - */ - itempreviousicon(): TemplateRef; - /** - * Custom template of previousthumbnailicon. - */ - previousthumbnailicon(): TemplateRef; - /** - * Custom template of nextthumbnailicon. - */ - nextthumbnailicon(): TemplateRef; - /** - * Custom template of caption. - * @param {Object} context - item data. - */ - caption(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of thumbnail. - * @param {Object} context - item data. - */ - thumbnail(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; - /** - * Custom template of item. - * @param {Object} context - item data. - */ - item(context: { - /** - * Item instance. - */ - $implicit: any; - }): TemplateRef<{ $implicit: any }>; -} diff --git a/src/app/components/inputicon/inputicon.ts b/src/app/components/inputicon/inputicon.ts index b181f0bf602..3c4a9b32b9d 100755 --- a/src/app/components/inputicon/inputicon.ts +++ b/src/app/components/inputicon/inputicon.ts @@ -1,17 +1,25 @@ import { CommonModule } from '@angular/common'; -import { Component, NgModule } from '@angular/core'; - +import { ChangeDetectionStrategy, Component, Input, NgModule, ViewEncapsulation } from '@angular/core'; import { SharedModule } from 'primeng/api'; +/** + * InputIcon displays an icon. + * @group Components + */ @Component({ selector: 'p-inputIcon', - template: ` `, - - host: { - class: 'p-element' - } + template: ``, + styleUrl: './inputicon.css', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush }) -export class InputIcon {} +export class InputIcon { + /** + * Style class of the element. + * @group Props + */ + @Input() styleClass: string | undefined; +} @NgModule({ imports: [CommonModule], diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json index 14344010e3f..59a53e54bf9 100644 --- a/src/app/showcase/doc/apidoc/index.json +++ b/src/app/showcase/doc/apidoc/index.json @@ -3102,6 +3102,12 @@ "optional": true, "readonly": false, "type": "string" + }, + { + "name": "listLabel", + "optional": true, + "readonly": false, + "type": "string" } ] } @@ -3761,7 +3767,7 @@ "optional": false, "readonly": false, "type": "boolean", - "default": "false", + "default": "true", "description": "Whether to show the empty message or not." }, { @@ -4446,7 +4452,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", + "type": "\"success\" | \"info\" | \"warning\" | \"danger\"", "description": "Severity type of the badge." } ] @@ -4482,7 +4488,7 @@ "name": "severity", "optional": false, "readonly": false, - "type": "\"success\" | \"warning\" | \"info\" | \"danger\"", + "type": "\"success\" | \"info\" | \"warning\" | \"danger\"", "description": "Severity type of the badge." }, { @@ -9547,8 +9553,7 @@ "name": "placeholder", "optional": false, "readonly": false, - "type": "string", - "description": "Default text to display when no option is selected." + "type": "Signal" }, { "name": "filterPlaceholder", @@ -10019,6 +10024,16 @@ "name": "focus", "parameters": [], "description": "Applies focus." + }, + { + "name": "clear", + "parameters": [ + { + "name": "event", + "type": "Event" + } + ], + "description": "Clears the model." } ] } @@ -10899,26 +10914,6 @@ } } }, - "iconfield": { - "components": { - "IconField": { - "description": "IconField wraps an input and an icon.", - "props": { - "description": "Defines the input properties of the component.", - "values": [ - { - "name": "iconPosition", - "optional": false, - "readonly": false, - "type": "\"left\" | \"right\"", - "description": "Position of the icon", - "default" :"right" - } - ] - } - } - } - }, "fieldset": { "components": { "Fieldset": { @@ -12095,6 +12090,26 @@ } } }, + "iconfield": { + "components": { + "IconField": { + "description": "IconField wraps an input and an icon.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "iconPosition", + "optional": false, + "readonly": false, + "type": "\"left\" | \"right\"", + "default": "left", + "description": "Position of the icon." + } + ] + } + } + } + }, "angledoubledown": { "components": {} }, @@ -12670,6 +12685,25 @@ } } }, + "inputicon": { + "components": { + "InputIcon": { + "description": "InputIcon displays an icon.", + "props": { + "description": "Defines the input properties of the component.", + "values": [ + { + "name": "styleClass", + "optional": false, + "readonly": false, + "type": "string", + "description": "Style class of the element." + } + ] + } + } + } + }, "inputmask": { "components": { "InputMask": { @@ -15137,7 +15171,6 @@ "optional": false, "readonly": false, "type": "string", - "default": "{0} items selected", "description": "Label to display after exceeding max selected labels e.g. ({0} items selected), defaults \"ellipsis\" keyword to indicate a text-overflow." }, { @@ -15396,7 +15429,7 @@ "name": "placeholder", "optional": false, "readonly": false, - "type": "string" + "type": "Signal" }, { "name": "options", @@ -18684,6 +18717,13 @@ "type": "string", "default": "2s", "description": "Duration of the rotate animation." + }, + { + "name": "ariaLabel", + "optional": false, + "readonly": false, + "type": "string", + "description": "Used to define a aria label attribute the current element." } ] } @@ -27756,4 +27796,4 @@ } } } -} +} \ No newline at end of file diff --git a/src/app/showcase/doc/iconfield/basicdoc.ts b/src/app/showcase/doc/iconfield/basicdoc.ts index 619ad34eb79..e3ef45ac3c6 100644 --- a/src/app/showcase/doc/iconfield/basicdoc.ts +++ b/src/app/showcase/doc/iconfield/basicdoc.ts @@ -11,33 +11,25 @@ import { Code } from '../../domain/code';

- - - - - + + +
` }) export class BasicDoc { - value: string | undefined; - code: Code = { - basic: ` - - - - + basic: ` + + `, html: `
- - - - - - + + + +
`, typescript: ` import { Component } from '@angular/core'; diff --git a/src/app/showcase/pages/iconfield/iconfielddemo.html b/src/app/showcase/pages/iconfield/iconfielddemo.html index d748a139bed..47931d93c4a 100755 --- a/src/app/showcase/pages/iconfield/iconfielddemo.html +++ b/src/app/showcase/pages/iconfield/iconfielddemo.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css index 826904c446f..61aadd4813f 100644 --- a/src/assets/components/themes/arya-blue/theme.css +++ b/src/assets/components/themes/arya-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css index e03fffa3598..3d798d14c92 100644 --- a/src/assets/components/themes/arya-green/theme.css +++ b/src/assets/components/themes/arya-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css index 8cd8c32ab51..53bd37b0554 100644 --- a/src/assets/components/themes/arya-orange/theme.css +++ b/src/assets/components/themes/arya-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css index 8eceecc17ab..79e18605807 100644 --- a/src/assets/components/themes/arya-purple/theme.css +++ b/src/assets/components/themes/arya-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css index 2e8030b48c6..a883adb3239 100644 --- a/src/assets/components/themes/bootstrap4-dark-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #f19ea6; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css index 9e574382dc0..2f31d744a89 100644 --- a/src/assets/components/themes/bootstrap4-dark-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-dark-purple/theme.css @@ -1069,6 +1069,12 @@ border-color: #f19ea6; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #2a323d; color: rgba(255, 255, 255, 0.6); @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f19ea6; } diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css index 9933f933730..1fccc8fbaa2 100644 --- a/src/assets/components/themes/bootstrap4-light-blue/theme.css +++ b/src/assets/components/themes/bootstrap4-light-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #dc3545; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css index 18860fef36a..d48c8faed77 100644 --- a/src/assets/components/themes/bootstrap4-light-purple/theme.css +++ b/src/assets/components/themes/bootstrap4-light-purple/theme.css @@ -1069,6 +1069,12 @@ border-color: #dc3545; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #495057; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #495057; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #495057; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #dc3545; } diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css index 731b7ba30d5..224e861ebf7 100644 --- a/src/assets/components/themes/fluent-light/theme.css +++ b/src/assets/components/themes/fluent-light/theme.css @@ -1065,6 +1065,12 @@ border-color: #a4252c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f2f1; color: #605e5c; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #605e5c; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #605e5c; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a4252c; } diff --git a/src/assets/components/themes/lara-dark-blue/theme.css b/src/assets/components/themes/lara-dark-blue/theme.css index 06e494801ad..1d1e385e502 100644 --- a/src/assets/components/themes/lara-dark-blue/theme.css +++ b/src/assets/components/themes/lara-dark-blue/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-indigo/theme.css b/src/assets/components/themes/lara-dark-indigo/theme.css index 6fb191d2c89..6485aa86b26 100644 --- a/src/assets/components/themes/lara-dark-indigo/theme.css +++ b/src/assets/components/themes/lara-dark-indigo/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-purple/theme.css b/src/assets/components/themes/lara-dark-purple/theme.css index 278966af800..896d0787ee9 100644 --- a/src/assets/components/themes/lara-dark-purple/theme.css +++ b/src/assets/components/themes/lara-dark-purple/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-dark-teal/theme.css b/src/assets/components/themes/lara-dark-teal/theme.css index 8118d1b873b..2bbd2c66490 100644 --- a/src/assets/components/themes/lara-dark-teal/theme.css +++ b/src/assets/components/themes/lara-dark-teal/theme.css @@ -1082,6 +1082,12 @@ border-color: #fca5a5; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2937; color: rgba(255, 255, 255, 0.6); @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #fca5a5; } diff --git a/src/assets/components/themes/lara-light-blue/theme.css b/src/assets/components/themes/lara-light-blue/theme.css index 2a62954fab8..7f067f10133 100644 --- a/src/assets/components/themes/lara-light-blue/theme.css +++ b/src/assets/components/themes/lara-light-blue/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-indigo/theme.css b/src/assets/components/themes/lara-light-indigo/theme.css index 2974a643020..a46ce4e78ab 100644 --- a/src/assets/components/themes/lara-light-indigo/theme.css +++ b/src/assets/components/themes/lara-light-indigo/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-purple/theme.css b/src/assets/components/themes/lara-light-purple/theme.css index 8b0976b250f..4d64bb5d2d0 100644 --- a/src/assets/components/themes/lara-light-purple/theme.css +++ b/src/assets/components/themes/lara-light-purple/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/lara-light-teal/theme.css b/src/assets/components/themes/lara-light-teal/theme.css index 359f03e5362..89806acf4a9 100644 --- a/src/assets/components/themes/lara-light-teal/theme.css +++ b/src/assets/components/themes/lara-light-teal/theme.css @@ -1082,6 +1082,12 @@ border-color: #e24c4c; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f3f4f6; color: #6b7280; @@ -1152,6 +1158,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #6b7280; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #6b7280; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e24c4c; } diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css index 1e165c183e4..6ecf58877e3 100644 --- a/src/assets/components/themes/luna-amber/theme.css +++ b/src/assets/components/themes/luna-amber/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css index 0b83a4ee11a..690ca30a506 100644 --- a/src/assets/components/themes/luna-blue/theme.css +++ b/src/assets/components/themes/luna-blue/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css index ec637309407..9d63a533f6a 100644 --- a/src/assets/components/themes/luna-green/theme.css +++ b/src/assets/components/themes/luna-green/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css index 9f8cc241d35..b60e2379949 100644 --- a/src/assets/components/themes/luna-pink/theme.css +++ b/src/assets/components/themes/luna-pink/theme.css @@ -1069,6 +1069,12 @@ border-color: #e57373; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #252525; color: #888888; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #888888; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #888888; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e57373; } diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css index 917acca6a2a..54a6c748921 100644 --- a/src/assets/components/themes/md-dark-deeppurple/theme.css +++ b/src/assets/components/themes/md-dark-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css index d3a215d5b96..129ec07972b 100644 --- a/src/assets/components/themes/md-dark-indigo/theme.css +++ b/src/assets/components/themes/md-dark-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css index 95fc4f3f7ac..78b119e9cd3 100644 --- a/src/assets/components/themes/md-light-deeppurple/theme.css +++ b/src/assets/components/themes/md-light-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css index a34f6ec02b9..1e728dff8e5 100644 --- a/src/assets/components/themes/md-light-indigo/theme.css +++ b/src/assets/components/themes/md-light-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 1rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 1rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css index 5895ad080df..d99b0f512f2 100644 --- a/src/assets/components/themes/mdc-dark-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-dark-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css index 113d1c42c7d..eac23eb98a5 100644 --- a/src/assets/components/themes/mdc-dark-indigo/theme.css +++ b/src/assets/components/themes/mdc-dark-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #f44435; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1e1e1e; color: rgba(255, 255, 255, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44435; } diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css index ed44bc5132d..3a7f9852f0f 100644 --- a/src/assets/components/themes/mdc-light-deeppurple/theme.css +++ b/src/assets/components/themes/mdc-light-deeppurple/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mdc-light-indigo/theme.css b/src/assets/components/themes/mdc-light-indigo/theme.css index f0f9a852550..5334d2c8039 100644 --- a/src/assets/components/themes/mdc-light-indigo/theme.css +++ b/src/assets/components/themes/mdc-light-indigo/theme.css @@ -1088,6 +1088,12 @@ border-color: #b00020; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: rgba(0, 0, 0, 0.6); @@ -1158,6 +1164,16 @@ width: 2.75rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(0, 0, 0, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #b00020; } diff --git a/src/assets/components/themes/mira/theme.css b/src/assets/components/themes/mira/theme.css index 098569d429d..9b9778cc56f 100644 --- a/src/assets/components/themes/mira/theme.css +++ b/src/assets/components/themes/mira/theme.css @@ -1091,6 +1091,12 @@ border-color: #bf616a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #ffffff; color: #81a1c1; @@ -1161,6 +1167,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #81a1c1; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #81a1c1; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #bf616a; } diff --git a/src/assets/components/themes/nano/theme.css b/src/assets/components/themes/nano/theme.css index a9b3c4b7abc..c1edd4c45b9 100644 --- a/src/assets/components/themes/nano/theme.css +++ b/src/assets/components/themes/nano/theme.css @@ -1065,6 +1065,12 @@ border-color: #d8222f; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dde1e6; color: #697077; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.25rem; + color: #697077; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.25rem; + color: #697077; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #d8222f; } diff --git a/src/assets/components/themes/nova-accent/theme.css b/src/assets/components/themes/nova-accent/theme.css index 15c76b69f7a..eb6d8831d8d 100644 --- a/src/assets/components/themes/nova-accent/theme.css +++ b/src/assets/components/themes/nova-accent/theme.css @@ -1065,6 +1065,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova-alt/theme.css b/src/assets/components/themes/nova-alt/theme.css index a7c600cbbbe..579009d6334 100644 --- a/src/assets/components/themes/nova-alt/theme.css +++ b/src/assets/components/themes/nova-alt/theme.css @@ -1069,6 +1069,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/nova/theme.css b/src/assets/components/themes/nova/theme.css index 9ea0568c619..3d38d4e5c01 100644 --- a/src/assets/components/themes/nova/theme.css +++ b/src/assets/components/themes/nova/theme.css @@ -1069,6 +1069,12 @@ border-color: #a80000; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #eaeaea; color: #848484; @@ -1139,6 +1145,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #848484; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #848484; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #a80000; } diff --git a/src/assets/components/themes/rhea/theme.css b/src/assets/components/themes/rhea/theme.css index c7e7d738112..541b007dbd2 100644 --- a/src/assets/components/themes/rhea/theme.css +++ b/src/assets/components/themes/rhea/theme.css @@ -1065,6 +1065,12 @@ border-color: #e7a3a3; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #dbdbdb; color: #666666; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.429rem; + color: #a6a6a6; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.429rem; + color: #a6a6a6; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #e7a3a3; } diff --git a/src/assets/components/themes/saga-blue/theme.css b/src/assets/components/themes/saga-blue/theme.css index 2778c14c019..3f688430269 100644 --- a/src/assets/components/themes/saga-blue/theme.css +++ b/src/assets/components/themes/saga-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-green/theme.css b/src/assets/components/themes/saga-green/theme.css index 05b613de6f2..8ac1594cde8 100644 --- a/src/assets/components/themes/saga-green/theme.css +++ b/src/assets/components/themes/saga-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-orange/theme.css b/src/assets/components/themes/saga-orange/theme.css index 04d12a5607f..9302ff6c9ed 100644 --- a/src/assets/components/themes/saga-orange/theme.css +++ b/src/assets/components/themes/saga-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/saga-purple/theme.css b/src/assets/components/themes/saga-purple/theme.css index 3c23e8fd166..5531cc7afb7 100644 --- a/src/assets/components/themes/saga-purple/theme.css +++ b/src/assets/components/themes/saga-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #f44336; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #e9ecef; color: #6c757d; @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: #6c757d; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: #6c757d; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f44336; } diff --git a/src/assets/components/themes/soho-dark/theme.css b/src/assets/components/themes/soho-dark/theme.css index c29ee539461..f936d2eb183 100644 --- a/src/assets/components/themes/soho-dark/theme.css +++ b/src/assets/components/themes/soho-dark/theme.css @@ -1087,6 +1087,12 @@ border-color: #ff9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #282936; color: rgba(255, 255, 255, 0.6); @@ -1157,6 +1163,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff9a9a; } diff --git a/src/assets/components/themes/soho-light/theme.css b/src/assets/components/themes/soho-light/theme.css index 742464f83cf..50273159d83 100644 --- a/src/assets/components/themes/soho-light/theme.css +++ b/src/assets/components/themes/soho-light/theme.css @@ -1087,6 +1087,12 @@ border-color: #ff6767; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f6f9fc; color: #708da9; @@ -1157,6 +1163,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #708da9; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #708da9; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ff6767; } diff --git a/src/assets/components/themes/tailwind-light/theme.css b/src/assets/components/themes/tailwind-light/theme.css index 476678bf5ad..cfc3493813c 100644 --- a/src/assets/components/themes/tailwind-light/theme.css +++ b/src/assets/components/themes/tailwind-light/theme.css @@ -1101,6 +1101,12 @@ border-color: #f0a9a7; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #fafafa; color: #71717a; @@ -1171,6 +1177,16 @@ width: 3rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #71717a; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #71717a; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f0a9a7; } diff --git a/src/assets/components/themes/vela-blue/theme.css b/src/assets/components/themes/vela-blue/theme.css index 970d2e5ac47..bf354cf1ce7 100644 --- a/src/assets/components/themes/vela-blue/theme.css +++ b/src/assets/components/themes/vela-blue/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-green/theme.css b/src/assets/components/themes/vela-green/theme.css index 6c562cb81aa..e3af26b3415 100644 --- a/src/assets/components/themes/vela-green/theme.css +++ b/src/assets/components/themes/vela-green/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-orange/theme.css b/src/assets/components/themes/vela-orange/theme.css index 683e53f2acc..dc654e9822d 100644 --- a/src/assets/components/themes/vela-orange/theme.css +++ b/src/assets/components/themes/vela-orange/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/vela-purple/theme.css b/src/assets/components/themes/vela-purple/theme.css index 6247fddd7d9..b7503aa1723 100644 --- a/src/assets/components/themes/vela-purple/theme.css +++ b/src/assets/components/themes/vela-purple/theme.css @@ -1065,6 +1065,12 @@ border-color: #ef9a9a; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #1f2d40; color: rgba(255, 255, 255, 0.6); @@ -1135,6 +1141,16 @@ width: 2.357rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.5rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #ef9a9a; } diff --git a/src/assets/components/themes/viva-dark/theme.css b/src/assets/components/themes/viva-dark/theme.css index 1dd6045cb43..d158f24fac4 100644 --- a/src/assets/components/themes/viva-dark/theme.css +++ b/src/assets/components/themes/viva-dark/theme.css @@ -1095,6 +1095,12 @@ border-color: #f78c79; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #161d21; color: rgba(255, 255, 255, 0.6); @@ -1165,6 +1171,16 @@ width: 2.857rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: rgba(255, 255, 255, 0.6); + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f78c79; } diff --git a/src/assets/components/themes/viva-light/theme.css b/src/assets/components/themes/viva-light/theme.css index 1e1b0a3a47a..05efd14ab13 100644 --- a/src/assets/components/themes/viva-light/theme.css +++ b/src/assets/components/themes/viva-light/theme.css @@ -1096,6 +1096,12 @@ border-color: #f88c79; } + .p-icon-field .p-input-icon { + position: absolute; + top: 50%; + margin-top: -0.5rem; + } + .p-inputgroup-addon { background: #f5f5f5; color: #898989; @@ -1166,6 +1172,16 @@ width: 2.857rem; } + .p-icon-field-left .p-input-icon:first-of-type { + left: 0.75rem; + color: #898989; + } + + .p-icon-field-right .p-input-icon:last-of-type { + right: 0.75rem; + color: #898989; + } + p-inputmask.ng-dirty.ng-invalid > .p-inputtext { border-color: #f88c79; }