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

Consistent focus-visible states

pull/4572/head
Cagatay Civici 2023-10-14 01:09:30 +03:00
parent 05f9b948c3
commit 54053cb6b3
15 changed files with 121 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/styles/layout/_core.scss
View File

@ -84,12 +84,8 @@ input[type="number"] {
border: none; border: none;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
}
.px-link:focus-visible { @include focus-visible();
outline: 0 none;
outline-offset: 0;
box-shadow: var(--focus-ring);
} }
.px-link:disabled { .px-link:disabled {

7
assets/styles/layout/_doc.scss
View File

@ -1,15 +1,13 @@
.doc-tabmenu { .doc-tabmenu {
list-style: none; list-style: none;
margin: 0 17rem 0 0; margin: 0 17rem 0 0;
padding: 0 0 1px 0; padding: 0;
display: flex; display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
border-bottom: 1px solid var(--surface-border); border-bottom: 1px solid var(--surface-border);
overflow: auto; overflow: visible;
li { li {
margin-bottom: -1px;
button { button {
background-color: transparent; background-color: transparent;
border: 0 none; border: 0 none;
@ -21,6 +19,7 @@
letter-spacing: 1px; letter-spacing: 1px;
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
margin: 0 0 -1px 0;
transition: all 0.2s; transition: all 0.2s;
border-bottom: 1px solid transparent; border-bottom: 1px solid transparent;
border-top-right-radius: var(--border-round); border-top-right-radius: var(--border-round);

3
assets/styles/layout/_docsearch.scss
View File

@ -4,8 +4,9 @@
height: 2rem; height: 2rem;
background-color: var(--surface-card); background-color: var(--surface-card);
margin: 0; margin: 0;
transition: border-color .3s; transition: all .3s;
padding: 0 .5rem; padding: 0 .5rem;
@include focus-visible();
&:hover { &:hover {
border-color: var(--primary-color); border-color: var(--primary-color);

5
assets/styles/layout/_footer.scss
View File

@ -12,9 +12,14 @@
a { a {
color: var(--primary-color); color: var(--primary-color);
font-weight: 700; font-weight: 700;
transition: all .3s;
border-radius: var(--border-radius);
@include focus-visible();
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
} }

7
assets/styles/layout/_mixins.scss Normal file
View File

@ -0,0 +1,7 @@
@mixin focus-visible($type:null) {
&:focus-visible {
outline: 0 none;
outline-offset: 0;
box-shadow: $type var(--focus-ring);
}
}

2
assets/styles/layout/_responsive.scss
View File

@ -148,7 +148,7 @@
} }
.layout-topbar-icon { .layout-topbar-icon {
display: block; display: inline-flex;
} }
} }

3
assets/styles/layout/_sidebar.scss
View File

@ -39,6 +39,7 @@
color: var(--surface-900); color: var(--surface-900);
font-weight: 600; font-weight: 600;
transition: all .2s; transition: all .2s;
border-radius: var(--border-radius);
.menu-icon { .menu-icon {
width: 2rem; width: 2rem;
@ -83,6 +84,8 @@
} }
} }
} }
@include focus-visible(inset);
} }
> div { > div {

12
assets/styles/layout/_topbar.scss
View File

@ -24,7 +24,19 @@
margin-right: 4rem; margin-right: 4rem;
} }
.layout-topbar-logo,
.layout-topbar-icon {
border-radius: var(--border-radius);
@include focus-visible();
svg {
width: 120px;
}
}
.layout-topbar-logo { .layout-topbar-logo {
display: inline-flex;
svg { svg {
width: 120px; width: 120px;
} }

5
assets/styles/layout/landing/_footer.scss Normal file
View File

@ -0,0 +1,5 @@
.landing-footer {
a {
@include focus-visible();
}
}

2
assets/styles/layout/landing/_landing.scss
View File

@ -2,6 +2,7 @@ $landingBreakpointMD: 767px;
$landingBreakpointLG: 991px; $landingBreakpointLG: 991px;
$landingBreakpointXL: 1199px; $landingBreakpointXL: 1199px;
@import '../_mixins';
@import './_main'; @import './_main';
@import './_light'; @import './_light';
@import './_dark'; @import './_dark';
@ -12,3 +13,4 @@ $landingBreakpointXL: 1199px;
@import './_blocks'; @import './_blocks';
@import './_templates'; @import './_templates';
@import './_features'; @import './_features';
@import './_footer';

4
assets/styles/layout/landing/_main.scss
View File

@ -10,7 +10,7 @@
} }
.linkbox { .linkbox {
transition: background-color 0.3s; transition: all 0.3s;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--home-linkbox-text-color); color: var(--home-linkbox-text-color);
@ -19,6 +19,8 @@
background-color: var(--home-linkbox-bg); background-color: var(--home-linkbox-bg);
border-radius: 10px; border-radius: 10px;
cursor: pointer; cursor: pointer;
@include focus-visible();
&:hover { &:hover {
background: var(--home-linkbox-hover-bg); background: var(--home-linkbox-hover-bg);

1
assets/styles/layout/layout.scss
View File

@ -1,5 +1,6 @@
@charset 'UTF-8'; @charset 'UTF-8';
@import './_mixins';
@import './_core'; @import './_core';
@import './_glow'; @import './_glow';
@import './_topbar'; @import './_topbar';

28
pages/landing/FooterSection.vue
View File

@ -6,7 +6,7 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-5">General</li> <li class="font-bold mb-5">General</li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/installation" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Get Started</router-link> <router-link to="/installation" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Get Started</router-link>
</li> </li>
</ul> </ul>
</div> </div>
@ -14,13 +14,13 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mb-5">Support</li> <li class="font-bold mb-5">Support</li>
<li class="mb-4"> <li class="mb-4">
<a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Forum</a> <a href="https://github.com/orgs/primefaces/discussions" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Forum</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Discord</a> <a href="https://discord.gg/gzKFYnpmCY" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Discord</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/support" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PRO Support</router-link> <router-link to="/support" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PRO Support</router-link>
</li> </li>
</ul> </ul>
</div> </div>
@ -28,25 +28,25 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li> <li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
<li class="mb-4"> <li class="mb-4">
<a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeTV</a> <a href="https://www.youtube.com/channel/UCTgmp69aBOlLnPEqlUyetWw" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PrimeTV</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Store</a> <a href="https://www.primefaces.org/store/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Store</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Source Code</a> <a href="https://github.com/primefaces/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Source Code</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Twitter</a> <a href="https://twitter.com/primevue" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Twitter</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Newsletter</a> <a href="https://www.primefaces.org/newsletter" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Newsletter</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">PrimeGear</a> <a href="https://gear.primefaces.org/" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">PrimeGear</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Contact Us</a> <a href="mailto:contact@primetek.com.tr" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Contact Us</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -54,13 +54,13 @@
<ul class="list-none p-0 m-0"> <ul class="list-none p-0 m-0">
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li> <li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/theming" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Guide</router-link> <router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Guide</router-link>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Designer</a> <a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Designer</a>
</li> </li>
<li class="mb-4"> <li class="mb-4">
<router-link to="/colors" class="text-secondary font-medium hover:text-primary transition-colors transition-duration-150">Colors</router-link> <router-link to="/colors" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-150">Colors</router-link>
</li> </li>
</ul> </ul>
</div> </div>

3
pages/landing/HeroSection.vue
View File

@ -4,8 +4,7 @@
<div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch"> <div class="w-full xl:w-6 flex flex-column justify-content-center lg:pr-8 align-items-center xl:align-items-stretch">
<h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1> <h1 class="text-6xl font-bold text-center xl:text-left">The Most Complete UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5"> <p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI ecosystem. Craft elegant interfaces effortlessly, and delight your users with smooth interactions and captivating visuals. With Elevate your web applications with PrimeVue's comprehensive suite of customizable, feature-rich UI components. With PrimeVue, turning your development vision into reality has never been easier.
PrimeVue, turning your development vision into reality has never been easier.
</p> </p>
<div class="flex align-items-center gap-3"> <div class="flex align-items-center gap-3">
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4"> <PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4">

122
public/themes/lara-light-teal/theme.css
View File

@ -44,7 +44,7 @@
--surface-overlay:#ffffff; --surface-overlay:#ffffff;
--surface-border:#dfe7ef; --surface-border:#dfe7ef;
--surface-hover:#f6f9fc; --surface-hover:#f6f9fc;
--focus-ring: 0 0 0 0.2rem #ecfdf5; --focus-ring: 0 0 0 0.2rem #a7f3d0;
--maskbg: rgba(0, 0, 0, 0.4); --maskbg: rgba(0, 0, 0, 0.4);
--highlight-bg: #F0FDFA; --highlight-bg: #F0FDFA;
--highlight-text-color: #047857; --highlight-text-color: #047857;
@ -336,7 +336,7 @@
.p-link:focus-visible { .p-link:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-component-overlay-enter { .p-component-overlay-enter {
@ -376,7 +376,7 @@
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container { .p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-autocomplete .p-autocomplete-multiple-container { .p-autocomplete .p-autocomplete-multiple-container {
@ -459,7 +459,7 @@
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext { .p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
@ -508,7 +508,7 @@
.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible { .p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datepicker .p-datepicker-header .p-datepicker-title { .p-datepicker .p-datepicker-header .p-datepicker-title {
line-height: 2rem; line-height: 2rem;
@ -555,7 +555,7 @@
.p-datepicker table td > span:focus { .p-datepicker table td > span:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datepicker table td.p-datepicker-today > span { .p-datepicker table td.p-datepicker-today > span {
background: #d1d5db; background: #d1d5db;
@ -594,7 +594,7 @@
.p-datepicker .p-timepicker button:focus-visible { .p-datepicker .p-timepicker button:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datepicker .p-timepicker button:last-child { .p-datepicker .p-timepicker button:last-child {
margin-top: 0.2em; margin-top: 0.2em;
@ -652,7 +652,7 @@
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus { .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover { .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):not(.p-highlight):hover {
background: #f3f4f6; background: #f3f4f6;
@ -660,7 +660,7 @@
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus { .p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover { .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):not(.p-highlight):hover {
background: #f3f4f6; background: #f3f4f6;
@ -668,7 +668,7 @@
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus { .p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
@media screen and (max-width: 769px) { @media screen and (max-width: 769px) {
@ -688,7 +688,7 @@
.p-cascadeselect:not(.p-disabled).p-focus { .p-cascadeselect:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-cascadeselect .p-cascadeselect-label { .p-cascadeselect .p-cascadeselect-label {
@ -796,7 +796,7 @@
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus { .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover { .p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-highlight:hover {
@ -827,7 +827,7 @@
.p-chips:not(.p-disabled).p-focus .p-chips-multiple-container { .p-chips:not(.p-disabled).p-focus .p-chips-multiple-container {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-chips .p-chips-multiple-container { .p-chips .p-chips-multiple-container {
@ -892,7 +892,7 @@
.p-dropdown:not(.p-disabled).p-focus { .p-dropdown:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-dropdown.p-dropdown-clearable .p-dropdown-label { .p-dropdown.p-dropdown-clearable .p-dropdown-label {
@ -1099,7 +1099,7 @@
.p-inputswitch.p-focus .p-inputswitch-slider { .p-inputswitch.p-focus .p-inputswitch-slider {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider { .p-inputswitch:not(.p-disabled):hover .p-inputswitch-slider {
background: #b9bfc8; background: #b9bfc8;
@ -1135,7 +1135,7 @@
.p-inputtext:enabled:focus { .p-inputtext:enabled:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-inputtext.p-invalid.p-component { .p-inputtext.p-invalid.p-component {
@ -1285,7 +1285,7 @@
.p-listbox.p-focus { .p-listbox.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-listbox.p-invalid { .p-listbox.p-invalid {
@ -1304,7 +1304,7 @@
.p-multiselect:not(.p-disabled).p-focus { .p-multiselect:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-multiselect .p-multiselect-label { .p-multiselect .p-multiselect-label {
@ -1383,7 +1383,7 @@
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible { .p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-multiselect-panel .p-multiselect-items { .p-multiselect-panel .p-multiselect-items {
padding: 0.75rem 0; padding: 0.75rem 0;
@ -1483,7 +1483,7 @@
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus { .p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon { .p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
@ -1539,7 +1539,7 @@
.p-rating .p-rating-item.p-focus { .p-rating .p-rating-item.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-rating .p-rating-item.p-rating-item-active .p-rating-icon { .p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
@ -1623,7 +1623,7 @@
.p-slider .p-slider-handle:focus { .p-slider .p-slider-handle:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-slider .p-slider-range { .p-slider .p-slider-range {
background: #10b981; background: #10b981;
@ -1645,7 +1645,7 @@
.p-treeselect:not(.p-disabled).p-focus { .p-treeselect:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-treeselect .p-treeselect-label { .p-treeselect .p-treeselect-label {
@ -1716,7 +1716,7 @@
.p-togglebutton.p-button:not(.p-disabled).p-focus { .p-togglebutton.p-button:not(.p-disabled).p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: #10b981; border-color: #10b981;
} }
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover { .p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
@ -1825,7 +1825,7 @@
.p-button:focus { .p-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-button .p-button-label { .p-button .p-button-label {
transition-duration: 0.2s; transition-duration: 0.2s;
@ -2211,7 +2211,7 @@
} }
.p-button.p-button-link:enabled:focus { .p-button.p-button-link:enabled:focus {
background: transparent; background: transparent;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
border-color: transparent; border-color: transparent;
} }
.p-button.p-button-link:enabled:active { .p-button.p-button-link:enabled:active {
@ -2239,7 +2239,7 @@
.p-speeddial-item.p-focus > .p-speeddial-action { .p-speeddial-item.p-focus > .p-speeddial-action {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-speeddial-action { .p-speeddial-action {
@ -2578,7 +2578,7 @@
.p-carousel .p-carousel-content .p-carousel-next:focus-visible { .p-carousel .p-carousel-content .p-carousel-next:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-carousel .p-carousel-indicators { .p-carousel .p-carousel-indicators {
padding: 1rem; padding: 1rem;
@ -2680,7 +2680,7 @@
color: #047857; color: #047857;
} }
.p-datatable .p-sortable-column:focus-visible { .p-datatable .p-sortable-column:focus-visible {
box-shadow: inset 0 0 0 0.15rem #ecfdf5; box-shadow: inset 0 0 0 0.15rem #a7f3d0;
outline: 0 none; outline: 0 none;
} }
.p-datatable .p-datatable-tbody > tr { .p-datatable .p-datatable-tbody > tr {
@ -2720,7 +2720,7 @@
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-save { .p-datatable .p-datatable-tbody > tr > td .p-row-editor-save {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -2729,7 +2729,7 @@
font-weight: 700; font-weight: 700;
} }
.p-datatable .p-datatable-tbody > tr:focus-visible { .p-datatable .p-datatable-tbody > tr:focus-visible {
outline: 0.15rem solid #ecfdf5; outline: 0.15rem solid #a7f3d0;
outline-offset: -0.15rem; outline-offset: -0.15rem;
} }
.p-datatable .p-datatable-tbody > tr.p-highlight { .p-datatable .p-datatable-tbody > tr.p-highlight {
@ -2926,7 +2926,7 @@
.p-column-filter-menu-button:focus-visible { .p-column-filter-menu-button:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-column-filter-clear-button { .p-column-filter-clear-button {
@ -2946,7 +2946,7 @@
.p-column-filter-clear-button:focus-visible { .p-column-filter-clear-button:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-column-filter-overlay { .p-column-filter-overlay {
@ -2980,7 +2980,7 @@
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible { .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ecfdf5; box-shadow: inset 0 0 0 0.15rem #a7f3d0;
} }
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator { .p-column-filter-overlay .p-column-filter-row-items .p-column-filter-separator {
border-top: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb;
@ -3107,7 +3107,7 @@
.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible { .p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-paginator { .p-paginator {
@ -3286,7 +3286,7 @@
.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content { .p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ecfdf5; box-shadow: inset 0 0 0 0.15rem #a7f3d0;
} }
.p-tree .p-tree-container .p-treenode .p-treenode-content { .p-tree .p-tree-container .p-treenode .p-treenode-content {
border-radius: 6px; border-radius: 6px;
@ -3311,7 +3311,7 @@
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible { .p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon { .p-tree .p-tree-container .p-treenode .p-treenode-content .p-treenode-icon {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -3405,7 +3405,7 @@
background: #f9fafb; background: #f9fafb;
} }
.p-treetable .p-sortable-column { .p-treetable .p-sortable-column {
outline-color: #ecfdf5; outline-color: #a7f3d0;
} }
.p-treetable .p-sortable-column .p-sortable-column-icon { .p-treetable .p-sortable-column .p-sortable-column-icon {
color: #374151; color: #374151;
@ -3463,7 +3463,7 @@
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox { .p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler + .p-checkbox {
margin-right: 0.5rem; margin-right: 0.5rem;
@ -3472,7 +3472,7 @@
color: #4b5563; color: #4b5563;
} }
.p-treetable .p-treetable-tbody > tr:focus-visible { .p-treetable .p-treetable-tbody > tr:focus-visible {
outline: 0.15rem solid #ecfdf5; outline: 0.15rem solid #a7f3d0;
outline-offset: -0.15rem; outline-offset: -0.15rem;
} }
.p-treetable .p-treetable-tbody > tr.p-highlight { .p-treetable .p-treetable-tbody > tr.p-highlight {
@ -3573,7 +3573,7 @@
.p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible { .p-accordion .p-accordion-header:not(.p-disabled) .p-accordion-header-link:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ecfdf5; box-shadow: inset 0 0 0 0.2rem #a7f3d0;
} }
.p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link { .p-accordion .p-accordion-header:not(.p-highlight):not(.p-disabled):hover .p-accordion-header-link {
background: #f3f4f6; background: #f3f4f6;
@ -3663,7 +3663,7 @@
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible { .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover { .p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:hover {
color: #374151; color: #374151;
@ -3729,7 +3729,7 @@
.p-panel .p-panel-header .p-panel-header-icon:focus-visible { .p-panel .p-panel-header .p-panel-header-icon:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-panel.p-panel-toggleable .p-panel-header { .p-panel.p-panel-toggleable .p-panel-header {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
@ -3763,7 +3763,7 @@
.p-scrollpanel .p-scrollpanel-bar:focus-visible { .p-scrollpanel .p-scrollpanel-bar:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-splitter { .p-splitter {
@ -3783,7 +3783,7 @@
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible { .p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-splitter .p-splitter-gutter-resizing { .p-splitter .p-splitter-gutter-resizing {
background: #e5e7eb; background: #e5e7eb;
@ -3813,7 +3813,7 @@
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible { .p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ecfdf5; box-shadow: inset 0 0 0 0.2rem #a7f3d0;
} }
.p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link { .p-tabview .p-tabview-nav li:not(.p-highlight):not(.p-disabled):hover .p-tabview-nav-link {
background: #ffffff; background: #ffffff;
@ -3835,7 +3835,7 @@
.p-tabview .p-tabview-nav-btn.p-link:focus-visible { .p-tabview .p-tabview-nav-btn.p-link:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ecfdf5; box-shadow: inset 0 0 0 0.2rem #a7f3d0;
} }
.p-tabview .p-tabview-panels { .p-tabview .p-tabview-panels {
background: #ffffff; background: #ffffff;
@ -3940,7 +3940,7 @@
.p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible { .p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-dialog .p-dialog-header .p-dialog-header-icon:last-child { .p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
margin-right: 0; margin-right: 0;
@ -4045,7 +4045,7 @@
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible { .p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-sidebar .p-sidebar-header + .p-sidebar-content { .p-sidebar .p-sidebar-header + .p-sidebar-content {
padding-top: 0; padding-top: 0;
@ -4087,7 +4087,7 @@
.p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus { .p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-fileupload .p-fileupload-content { .p-fileupload .p-fileupload-content {
background: #ffffff; background: #ffffff;
@ -4151,7 +4151,7 @@
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible { .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text { .p-breadcrumb .p-breadcrumb-list li .p-menuitem-link .p-menuitem-text {
color: #4b5563; color: #4b5563;
@ -4270,7 +4270,7 @@
.p-dock .p-dock-item.p-focus { .p-dock .p-dock-item.p-focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.15rem #ecfdf5; box-shadow: inset 0 0 0 0.15rem #a7f3d0;
} }
.p-dock .p-dock-link { .p-dock .p-dock-link {
width: 4rem; width: 4rem;
@ -4651,7 +4651,7 @@
.p-menubar .p-menubar-button:focus { .p-menubar .p-menubar-button:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-menubar .p-menubar-root-list { .p-menubar .p-menubar-root-list {
position: absolute; position: absolute;
@ -4744,7 +4744,7 @@
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { .p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ecfdf5; box-shadow: inset 0 0 0 0.2rem #a7f3d0;
} }
.p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content { .p-panelmenu .p-panelmenu-header:not(.p-highlight):not(.p-disabled):hover .p-panelmenu-header-content {
background: #f3f4f6; background: #f3f4f6;
@ -4869,7 +4869,7 @@
.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible { .p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-steps .p-steps-item.p-highlight .p-steps-number { .p-steps .p-steps-item.p-highlight .p-steps-number {
background: #F0FDFA; background: #F0FDFA;
@ -4917,7 +4917,7 @@
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible { .p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: inset 0 0 0 0.2rem #ecfdf5; box-shadow: inset 0 0 0 0.2rem #a7f3d0;
} }
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link { .p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
background: #ffffff; background: #ffffff;
@ -5089,7 +5089,7 @@
.p-message .p-message-close:focus-visible { .p-message .p-message-close:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-message.p-message-info { .p-message.p-message-info {
background: rgba(219, 234, 254, 0.7); background: rgba(219, 234, 254, 0.7);
@ -5193,7 +5193,7 @@
.p-toast .p-toast-message .p-toast-icon-close:focus-visible { .p-toast .p-toast-message .p-toast-icon-close:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-toast .p-toast-message.p-toast-message-info { .p-toast .p-toast-message.p-toast-message-info {
background: rgba(219, 234, 254, 0.7); background: rgba(219, 234, 254, 0.7);
@ -5340,7 +5340,7 @@
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible { .p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-galleria-mask { .p-galleria-mask {
@ -5488,7 +5488,7 @@
.p-chip .p-chip-remove-icon:focus-visible { .p-chip .p-chip-remove-icon:focus-visible {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-chip .p-chip-remove-icon:focus { .p-chip .p-chip-remove-icon:focus {
outline: 0 none; outline: 0 none;
@ -5506,7 +5506,7 @@
.p-inplace .p-inplace-display:focus { .p-inplace .p-inplace-display:focus {
outline: 0 none; outline: 0 none;
outline-offset: 0; outline-offset: 0;
box-shadow: 0 0 0 0.2rem #ecfdf5; box-shadow: 0 0 0 0.2rem #a7f3d0;
} }
.p-progressbar { .p-progressbar {