Customize focus stume on user-quota

Chocobozzz · Jul 23, 2020 · 90556fe · 90556fe
1 parent 995178f
commit 90556fe
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/client/src/app/shared/shared-main/users/user-quota.component.html b/client/src/app/shared/shared-main/users/user-quota.component.html
@@ -1,6 +1,6 @@
 <div class="user-quota mb-3">
   <div>
-    <strong tabindex="0" i18n>Total video quota</strong>
+    <strong class="user-quota-title" tabindex="0" i18n>Total video quota</strong>
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuota()">
       <div class="progress-bar" tabindex="0" role="progressbar" [style]="{ width: userVideoQuotaPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsed" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuota">
@@ -10,7 +10,7 @@
   </div>
 
   <div *ngIf="hasDailyQuota()" class="mt-3">
-    <strong tabindex="0" i18n>Daily video quota</strong>
+    <strong class="user-quota-title" tabindex="0" i18n>Daily video quota</strong>
     <div class="progress" tabindex="0" [ngbTooltip]="titleVideoQuotaDaily()">
       <div class="progress-bar secondary" role="progressbar" [style]="{ width: userVideoQuotaDailyPercentage + '%' }"
         [attr.aria-valuenow]="userVideoQuotaUsedDaily" aria-valuemin="0" [attr.aria-valuemax]="user.videoQuotaDaily">

diff --git a/client/src/app/shared/shared-main/users/user-quota.component.scss b/client/src/app/shared/shared-main/users/user-quota.component.scss
@@ -13,6 +13,11 @@
     width: 100% !important;
   }
 
+  .user-quota-title, .progress {
+    @include disable-outline;
+    @include button-focus(pvar(--mainColorLightest));
+  }
+
   .progress {
     @include progressbar;