Consistent focus-visible states
Cagatay Civici
parent
05f9b948c3
commit
54053cb6b3
|
|
@ -84,12 +84,8 @@ input[type="number"] {
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.px-link:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: var(--focus-ring);
|
||||
@include focus-visible();
|
||||
}
|
||||
|
||||
.px-link:disabled {
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
.doc-tabmenu {
|
||||
list-style: none;
|
||||
margin: 0 17rem 0 0;
|
||||
padding: 0 0 1px 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--surface-border);
|
||||
overflow: auto;
|
||||
overflow: visible;
|
||||
|
||||
li {
|
||||
margin-bottom: -1px;
|
||||
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: 0 none;
|
||||
|
|
@ -21,6 +19,7 @@
|
|||
letter-spacing: 1px;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
margin: 0 0 -1px 0;
|
||||
transition: all 0.2s;
|
||||
border-bottom: 1px solid transparent;
|
||||
border-top-right-radius: var(--border-round);
|
||||
|
|
|
|||
|
|
@ -4,8 +4,9 @@
|
|||
height: 2rem;
|
||||
background-color: var(--surface-card);
|
||||
margin: 0;
|
||||
transition: border-color .3s;
|
||||
transition: all .3s;
|
||||
padding: 0 .5rem;
|
||||
@include focus-visible();
|
||||
|
||||
&:hover {
|
||||
border-color: var(--primary-color);
|
||||
|
|
|
|||
|
|
@ -12,9 +12,14 @@
|
|||
a {
|
||||
color: var(--primary-color);
|
||||
font-weight: 700;
|
||||
transition: all .3s;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
@include focus-visible();
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
@mixin focus-visible($type:null) {
|
||||
&:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: $type var(--focus-ring);
|
||||
}
|
||||
}
|
||||
|
|
@ -148,7 +148,7 @@
|
|||
}
|
||||
|
||||
.layout-topbar-icon {
|
||||
display: block;
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@
|
|||
color: var(--surface-900);
|
||||
font-weight: 600;
|
||||
transition: all .2s;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
.menu-icon {
|
||||
width: 2rem;
|
||||
|
|
@ -83,6 +84,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include focus-visible(inset);
|
||||
}
|
||||
|
||||
> div {
|
||||
|
|
|
|||
|
|
@ -24,7 +24,19 @@
|
|||
margin-right: 4rem;
|
||||
}
|
||||
|
||||
.layout-topbar-logo,
|
||||
.layout-topbar-icon {
|
||||
border-radius: var(--border-radius);
|
||||
@include focus-visible();
|
||||
|
||||
svg {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-topbar-logo {
|
||||
display: inline-flex;
|
||||
|
||||
svg {
|
||||
width: 120px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
.landing-footer {
|
||||
a {
|
||||
@include focus-visible();
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ $landingBreakpointMD: 767px;
|
|||
$landingBreakpointLG: 991px;
|
||||
$landingBreakpointXL: 1199px;
|
||||
|
||||
@import '../_mixins';
|
||||
@import './_main';
|
||||
@import './_light';
|
||||
@import './_dark';
|
||||
|
|
@ -12,3 +13,4 @@ $landingBreakpointXL: 1199px;
|
|||
@import './_blocks';
|
||||
@import './_templates';
|
||||
@import './_features';
|
||||
@import './_footer';
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
}
|
||||
|
||||
.linkbox {
|
||||
transition: background-color 0.3s;
|
||||
transition: all 0.3s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--home-linkbox-text-color);
|
||||
|
|
@ -19,6 +19,8 @@
|
|||
background-color: var(--home-linkbox-bg);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
@include focus-visible();
|
||||
|
||||
&:hover {
|
||||
background: var(--home-linkbox-hover-bg);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
@charset 'UTF-8';
|
||||
|
||||
@import './_mixins';
|
||||
@import './_core';
|
||||
@import './_glow';
|
||||
@import './_topbar';
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">General</li>
|
||||
<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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -14,13 +14,13 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mb-5">Support</li>
|
||||
<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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -28,25 +28,25 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
|
||||
<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 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 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 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 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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -54,13 +54,13 @@
|
|||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<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 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 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>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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">
|
||||
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
|
||||
PrimeVue, turning your development vision into reality has never been easier.
|
||||
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.
|
||||
</p>
|
||||
<div class="flex align-items-center gap-3">
|
||||
<PrimeVueNuxtLink to="/installation" class="linkbox active font-semibold py-3 px-4">
|
||||
|
|
|
|||
|
|
@ -44,7 +44,7 @@
|
|||
--surface-overlay:#ffffff;
|
||||
--surface-border:#dfe7ef;
|
||||
--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);
|
||||
--highlight-bg: #F0FDFA;
|
||||
--highlight-text-color: #047857;
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
.p-link:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-component-overlay-enter {
|
||||
|
|
@ -376,7 +376,7 @@
|
|||
.p-autocomplete:not(.p-disabled).p-focus .p-autocomplete-multiple-container {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-autocomplete .p-autocomplete-multiple-container {
|
||||
|
|
@ -459,7 +459,7 @@
|
|||
.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
|
||||
|
|
@ -508,7 +508,7 @@
|
|||
.p-datepicker .p-datepicker-header .p-datepicker-next:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
line-height: 2rem;
|
||||
|
|
@ -555,7 +555,7 @@
|
|||
.p-datepicker table td > span:focus {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #d1d5db;
|
||||
|
|
@ -594,7 +594,7 @@
|
|||
.p-datepicker .p-timepicker button:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
margin-top: 0.2em;
|
||||
|
|
@ -652,7 +652,7 @@
|
|||
.p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):focus {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #f3f4f6;
|
||||
|
|
@ -660,7 +660,7 @@
|
|||
.p-datepicker:not(.p-disabled) .p-monthpicker .p-monthpicker-month:not(.p-disabled):focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 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 {
|
||||
background: #f3f4f6;
|
||||
|
|
@ -668,7 +668,7 @@
|
|||
.p-datepicker:not(.p-disabled) .p-yearpicker .p-yearpicker-year:not(.p-disabled):focus {
|
||||
outline: 0 none;
|
||||
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) {
|
||||
|
|
@ -688,7 +688,7 @@
|
|||
.p-cascadeselect:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-cascadeselect .p-cascadeselect-label {
|
||||
|
|
@ -796,7 +796,7 @@
|
|||
.p-checkbox:not(.p-checkbox-disabled) .p-checkbox-box.p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.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 {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-chips .p-chips-multiple-container {
|
||||
|
|
@ -892,7 +892,7 @@
|
|||
.p-dropdown:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-dropdown.p-dropdown-clearable .p-dropdown-label {
|
||||
|
|
@ -1099,7 +1099,7 @@
|
|||
.p-inputswitch.p-focus .p-inputswitch-slider {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #b9bfc8;
|
||||
|
|
@ -1135,7 +1135,7 @@
|
|||
.p-inputtext:enabled:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-inputtext.p-invalid.p-component {
|
||||
|
|
@ -1285,7 +1285,7 @@
|
|||
.p-listbox.p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-listbox.p-invalid {
|
||||
|
|
@ -1304,7 +1304,7 @@
|
|||
.p-multiselect:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-multiselect .p-multiselect-label {
|
||||
|
|
@ -1383,7 +1383,7 @@
|
|||
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
padding: 0.75rem 0;
|
||||
|
|
@ -1483,7 +1483,7 @@
|
|||
.p-radiobutton .p-radiobutton-box:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-radiobutton .p-radiobutton-box .p-radiobutton-icon {
|
||||
|
|
@ -1539,7 +1539,7 @@
|
|||
.p-rating .p-rating-item.p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-rating .p-rating-item.p-rating-item-active .p-rating-icon {
|
||||
|
|
@ -1623,7 +1623,7 @@
|
|||
.p-slider .p-slider-handle:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
.p-slider .p-slider-range {
|
||||
background: #10b981;
|
||||
|
|
@ -1645,7 +1645,7 @@
|
|||
.p-treeselect:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-treeselect .p-treeselect-label {
|
||||
|
|
@ -1716,7 +1716,7 @@
|
|||
.p-togglebutton.p-button:not(.p-disabled).p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: #10b981;
|
||||
}
|
||||
.p-togglebutton.p-button:not(.p-disabled):not(.p-highlight):hover {
|
||||
|
|
@ -1825,7 +1825,7 @@
|
|||
.p-button:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
.p-button .p-button-label {
|
||||
transition-duration: 0.2s;
|
||||
|
|
@ -2211,7 +2211,7 @@
|
|||
}
|
||||
.p-button.p-button-link:enabled:focus {
|
||||
background: transparent;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
border-color: transparent;
|
||||
}
|
||||
.p-button.p-button-link:enabled:active {
|
||||
|
|
@ -2239,7 +2239,7 @@
|
|||
.p-speeddial-item.p-focus > .p-speeddial-action {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-speeddial-action {
|
||||
|
|
@ -2578,7 +2578,7 @@
|
|||
.p-carousel .p-carousel-content .p-carousel-next:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
.p-carousel .p-carousel-indicators {
|
||||
padding: 1rem;
|
||||
|
|
@ -2680,7 +2680,7 @@
|
|||
color: #047857;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.p-datatable .p-datatable-tbody > tr {
|
||||
|
|
@ -2720,7 +2720,7 @@
|
|||
.p-datatable .p-datatable-tbody > tr > td .p-row-editor-cancel:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -2729,7 +2729,7 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
.p-datatable .p-datatable-tbody > tr:focus-visible {
|
||||
outline: 0.15rem solid #ecfdf5;
|
||||
outline: 0.15rem solid #a7f3d0;
|
||||
outline-offset: -0.15rem;
|
||||
}
|
||||
.p-datatable .p-datatable-tbody > tr.p-highlight {
|
||||
|
|
@ -2926,7 +2926,7 @@
|
|||
.p-column-filter-menu-button:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-column-filter-clear-button {
|
||||
|
|
@ -2946,7 +2946,7 @@
|
|||
.p-column-filter-clear-button:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-column-filter-overlay {
|
||||
|
|
@ -2980,7 +2980,7 @@
|
|||
.p-column-filter-overlay .p-column-filter-row-items .p-column-filter-row-item:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
border-top: 1px solid #e5e7eb;
|
||||
|
|
@ -3107,7 +3107,7 @@
|
|||
.p-organizationchart .p-organizationchart-node-content .p-node-toggler:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-paginator {
|
||||
|
|
@ -3286,7 +3286,7 @@
|
|||
.p-tree .p-tree-container .p-treenode:focus > .p-treenode-content {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
border-radius: 6px;
|
||||
|
|
@ -3311,7 +3311,7 @@
|
|||
.p-tree .p-tree-container .p-treenode .p-treenode-content .p-tree-toggler:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -3405,7 +3405,7 @@
|
|||
background: #f9fafb;
|
||||
}
|
||||
.p-treetable .p-sortable-column {
|
||||
outline-color: #ecfdf5;
|
||||
outline-color: #a7f3d0;
|
||||
}
|
||||
.p-treetable .p-sortable-column .p-sortable-column-icon {
|
||||
color: #374151;
|
||||
|
|
@ -3463,7 +3463,7 @@
|
|||
.p-treetable .p-treetable-tbody > tr > td .p-treetable-toggler:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
margin-right: 0.5rem;
|
||||
|
|
@ -3472,7 +3472,7 @@
|
|||
color: #4b5563;
|
||||
}
|
||||
.p-treetable .p-treetable-tbody > tr:focus-visible {
|
||||
outline: 0.15rem solid #ecfdf5;
|
||||
outline: 0.15rem solid #a7f3d0;
|
||||
outline-offset: -0.15rem;
|
||||
}
|
||||
.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 {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #f3f4f6;
|
||||
|
|
@ -3663,7 +3663,7 @@
|
|||
.p-fieldset.p-fieldset-toggleable .p-fieldset-legend a:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
color: #374151;
|
||||
|
|
@ -3729,7 +3729,7 @@
|
|||
.p-panel .p-panel-header .p-panel-header-icon:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
padding: 0.75rem 1.25rem;
|
||||
|
|
@ -3763,7 +3763,7 @@
|
|||
.p-scrollpanel .p-scrollpanel-bar:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-splitter {
|
||||
|
|
@ -3783,7 +3783,7 @@
|
|||
.p-splitter .p-splitter-gutter .p-splitter-gutter-handle:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #e5e7eb;
|
||||
|
|
@ -3813,7 +3813,7 @@
|
|||
.p-tabview .p-tabview-nav li .p-tabview-nav-link:not(.p-disabled):focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #ffffff;
|
||||
|
|
@ -3835,7 +3835,7 @@
|
|||
.p-tabview .p-tabview-nav-btn.p-link:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #ffffff;
|
||||
|
|
@ -3940,7 +3940,7 @@
|
|||
.p-dialog .p-dialog-header .p-dialog-header-icon:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
margin-right: 0;
|
||||
|
|
@ -4045,7 +4045,7 @@
|
|||
.p-sidebar .p-sidebar-header .p-sidebar-icon:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
padding-top: 0;
|
||||
|
|
@ -4087,7 +4087,7 @@
|
|||
.p-fileupload .p-fileupload-buttonbar .p-button.p-fileupload-choose.p-focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
.p-fileupload .p-fileupload-content {
|
||||
background: #ffffff;
|
||||
|
|
@ -4151,7 +4151,7 @@
|
|||
.p-breadcrumb .p-breadcrumb-list li .p-menuitem-link:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
color: #4b5563;
|
||||
|
|
@ -4270,7 +4270,7 @@
|
|||
.p-dock .p-dock-item.p-focus {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
width: 4rem;
|
||||
|
|
@ -4651,7 +4651,7 @@
|
|||
.p-menubar .p-menubar-button:focus {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
position: absolute;
|
||||
|
|
@ -4744,7 +4744,7 @@
|
|||
.p-panelmenu .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #f3f4f6;
|
||||
|
|
@ -4869,7 +4869,7 @@
|
|||
.p-steps .p-steps-item .p-menuitem-link:not(.p-disabled):focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #F0FDFA;
|
||||
|
|
@ -4917,7 +4917,7 @@
|
|||
.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: #ffffff;
|
||||
|
|
@ -5089,7 +5089,7 @@
|
|||
.p-message .p-message-close:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
.p-message.p-message-info {
|
||||
background: rgba(219, 234, 254, 0.7);
|
||||
|
|
@ -5193,7 +5193,7 @@
|
|||
.p-toast .p-toast-message .p-toast-icon-close:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
background: rgba(219, 234, 254, 0.7);
|
||||
|
|
@ -5340,7 +5340,7 @@
|
|||
.p-galleria .p-galleria-thumbnail-container .p-galleria-thumbnail-item-content:focus-visible {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-galleria-mask {
|
||||
|
|
@ -5488,7 +5488,7 @@
|
|||
.p-chip .p-chip-remove-icon:focus-visible {
|
||||
outline: 0 none;
|
||||
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 {
|
||||
outline: 0 none;
|
||||
|
|
@ -5506,7 +5506,7 @@
|
|||
.p-inplace .p-inplace-display:focus {
|
||||
outline: 0 none;
|
||||
outline-offset: 0;
|
||||
box-shadow: 0 0 0 0.2rem #ecfdf5;
|
||||
box-shadow: 0 0 0 0.2rem #a7f3d0;
|
||||
}
|
||||
|
||||
.p-progressbar {
|
||||
|
|
|
|||
Loading…
Reference in New Issue