Update checkbox and radios

primefaces · Apr 8, 2024 · b52671c · b52671c
1 parent 6787d79
commit b52671c
Show file tree

Hide file tree

Showing 76 changed files with 5,369 additions and 3,986 deletions.
diff --git a/src/app/showcase/layout/app.component.ts b/src/app/showcase/layout/app.component.ts
@@ -1,11 +1,9 @@
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { DOCUMENT } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { Component, Inject, OnDestroy, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core';
+import { Component, Inject, OnInit, PLATFORM_ID, Renderer2, afterNextRender } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
 import { PrimeNGConfig } from 'primeng/api';
-import { Subscription } from 'rxjs';
-import { Theme } from '../domain/theme';
 import { LandingComponent } from '../pages/landing/landing.component';
 import { AppConfigService } from '../service/appconfigservice';
 import { CarService } from '../service/carservice';
@@ -21,7 +19,6 @@ import { AppConfigComponent } from './config/app.config.component';
 import { AppMenuComponent } from './menu/app.menu.component';
 import { AppNewsComponent } from './news/app.news.component';
 import { AppTopBarComponent } from './topbar/app.topbar.component';
-import { AppConfig } from '../domain/appconfig';
 
 @Component({
     selector: 'app-root',
@@ -72,7 +69,7 @@ export class AppComponent implements OnInit {
                 }
 
                 const { theme, darkMode } = this.configService.config();
-                const landingTheme = darkMode ? 'lara-dark-blue' : 'lara-light-blue';
+                const landingTheme = darkMode ? 'aura-dark-blue' : 'aura-light-blue';
                 if (event.urlAfterRedirects === '/' && theme !== landingTheme) {
                     this.configService.config.update((config) => ({ ...config, theme: landingTheme, dark: darkMode }));
                 }

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -822,6 +822,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 3px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1658,6 +1659,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #64B5F6;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -822,6 +822,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 3px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1658,6 +1659,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #81C784;

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -822,6 +822,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 3px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1658,6 +1659,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #FFD54F;

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -822,6 +822,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 3px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1658,6 +1659,7 @@
     color: rgba(255, 255, 255, 0.87);
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #BA68C8;

diff --git a/src/assets/components/themes/aura-dark-amber/theme.css b/src/assets/components/themes/aura-dark-amber/theme.css
@@ -839,6 +839,7 @@
     color: #ffffff;
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1675,6 +1676,7 @@
     color: #ffffff;
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #52525b;
@@ -6552,21 +6554,17 @@
   .p-checkbox .p-checkbox-box.p-focus {
     outline-offset: 2px;
   }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+  .p-checkbox .p-checkbox-box.p-focus.p-highlight {
     border-color: #fbbf24;
   }
-  .p-checkbox.p-disabled {
+  .p-checkbox.p-checkbox-disabled {
     opacity: 1;
   }
-  .p-checkbox.p-disabled .p-checkbox-box {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box {
     background-color: #3f3f46;
     border: 1px solid #3f3f46;
   }
-  .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon {
     color: #a1a1aa;
   }
 
@@ -7286,21 +7284,17 @@
   .p-radiobutton .p-radiobutton-box.p-focus {
     outline-offset: 2px;
   }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+  .p-radiobutton .p-radiobutton-box.p-focus.p-highlight {
     border-color: #fbbf24;
   }
-  .p-radiobutton.p-disabled {
+  .p-radiobutton.p-radiobutton-disabled {
     opacity: 1;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box {
     border: 1px solid #3f3f46;
     background-color: #3f3f46;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon {
     background-color: #a1a1aa;
   }
 

diff --git a/src/assets/components/themes/aura-dark-blue/theme.css b/src/assets/components/themes/aura-dark-blue/theme.css
@@ -839,6 +839,7 @@
     color: #ffffff;
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1675,6 +1676,7 @@
     color: #ffffff;
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #52525b;
@@ -6552,21 +6554,17 @@
   .p-checkbox .p-checkbox-box.p-focus {
     outline-offset: 2px;
   }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+  .p-checkbox .p-checkbox-box.p-focus.p-highlight {
     border-color: #60a5fa;
   }
-  .p-checkbox.p-disabled {
+  .p-checkbox.p-checkbox-disabled {
     opacity: 1;
   }
-  .p-checkbox.p-disabled .p-checkbox-box {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box {
     background-color: #3f3f46;
     border: 1px solid #3f3f46;
   }
-  .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon {
     color: #a1a1aa;
   }
 
@@ -7286,21 +7284,17 @@
   .p-radiobutton .p-radiobutton-box.p-focus {
     outline-offset: 2px;
   }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+  .p-radiobutton .p-radiobutton-box.p-focus.p-highlight {
     border-color: #60a5fa;
   }
-  .p-radiobutton.p-disabled {
+  .p-radiobutton.p-radiobutton-disabled {
     opacity: 1;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box {
     border: 1px solid #3f3f46;
     background-color: #3f3f46;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon {
     background-color: #a1a1aa;
   }
 

diff --git a/src/assets/components/themes/aura-dark-cyan/theme.css b/src/assets/components/themes/aura-dark-cyan/theme.css
@@ -839,6 +839,7 @@
     color: #ffffff;
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1675,6 +1676,7 @@
     color: #ffffff;
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #52525b;
@@ -6552,21 +6554,17 @@
   .p-checkbox .p-checkbox-box.p-focus {
     outline-offset: 2px;
   }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+  .p-checkbox .p-checkbox-box.p-focus.p-highlight {
     border-color: #22d3ee;
   }
-  .p-checkbox.p-disabled {
+  .p-checkbox.p-checkbox-disabled {
     opacity: 1;
   }
-  .p-checkbox.p-disabled .p-checkbox-box {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box {
     background-color: #3f3f46;
     border: 1px solid #3f3f46;
   }
-  .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon {
     color: #a1a1aa;
   }
 
@@ -7286,21 +7284,17 @@
   .p-radiobutton .p-radiobutton-box.p-focus {
     outline-offset: 2px;
   }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+  .p-radiobutton .p-radiobutton-box.p-focus.p-highlight {
     border-color: #22d3ee;
   }
-  .p-radiobutton.p-disabled {
+  .p-radiobutton.p-radiobutton-disabled {
     opacity: 1;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box {
     border: 1px solid #3f3f46;
     background-color: #3f3f46;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon {
     background-color: #a1a1aa;
   }
 

diff --git a/src/assets/components/themes/aura-dark-green/theme.css b/src/assets/components/themes/aura-dark-green/theme.css
@@ -839,6 +839,7 @@
     color: #ffffff;
     border-radius: 6px;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-checkbox .p-checkbox-box .p-checkbox-icon {
     transition-duration: 0.2s;
@@ -1675,6 +1676,7 @@
     color: #ffffff;
     border-radius: 50%;
     transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, outline-color 0.2s;
+    outline-color: transparent;
   }
   .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
     border-color: #52525b;
@@ -6552,21 +6554,17 @@
   .p-checkbox .p-checkbox-box.p-focus {
     outline-offset: 2px;
   }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible) .p-checkbox-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-checkbox:not(.p-disabled):has(.p-checkbox-input:focus-visible).p-highlight .p-checkbox-box {
+  .p-checkbox .p-checkbox-box.p-focus.p-highlight {
     border-color: #34d399;
   }
-  .p-checkbox.p-disabled {
+  .p-checkbox.p-checkbox-disabled {
     opacity: 1;
   }
-  .p-checkbox.p-disabled .p-checkbox-box {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box {
     background-color: #3f3f46;
     border: 1px solid #3f3f46;
   }
-  .p-checkbox.p-disabled .p-checkbox-box .p-checkbox-icon {
+  .p-checkbox.p-checkbox-disabled .p-checkbox-box .p-checkbox-icon {
     color: #a1a1aa;
   }
 
@@ -7286,21 +7284,17 @@
   .p-radiobutton .p-radiobutton-box.p-focus {
     outline-offset: 2px;
   }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
-    outline-width: 1px;
-    outline-offset: 2px;
-  }
-  .p-radiobutton:not(.p-disabled):has(.p-radiobutton-input:focus-visible).p-highlight .p-radiobutton-box {
+  .p-radiobutton .p-radiobutton-box.p-focus.p-highlight {
     border-color: #34d399;
   }
-  .p-radiobutton.p-disabled {
+  .p-radiobutton.p-radiobutton-disabled {
     opacity: 1;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box {
     border: 1px solid #3f3f46;
     background-color: #3f3f46;
   }
-  .p-radiobutton.p-disabled .p-radiobutton-box .p-radiobutton-icon {
+  .p-radiobutton.p-radiobutton-disabled .p-radiobutton-box .p-radiobutton-icon {
     background-color: #a1a1aa;
   }