niteshandClaude Sonnet 5
f8c532f74a
Replace mat-tab-nav-bar with a plain wrapping pill nav so all 16 approval sections stay visible and one click away, instead of being hidden behind Material's prev/next scroll arrows on a single-row strip. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
125 lines
2.5 KiB
SCSS
125 lines
2.5 KiB
SCSS
/**
|
|
* Copyright since 2025 Mifos Initiative
|
|
*
|
|
* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
*/
|
|
|
|
@use '../../shared/styles/list-layout' as *;
|
|
|
|
$navy: #0d1b2a;
|
|
$blue: #1e88e5;
|
|
$blue-d: #1e40af;
|
|
$purple: #7c3aed;
|
|
$green: #10b981;
|
|
$amber: #f59e0b;
|
|
|
|
.ac-container {
|
|
padding: 20px 24px;
|
|
max-width: 1440px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ac-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 16px;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
|
|
&__left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
&__icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, $blue 0%, $purple 100%);
|
|
color: #fff;
|
|
font-size: 18px;
|
|
box-shadow: 0 2px 8px rgb(29 78 216 / 25%);
|
|
}
|
|
|
|
&__title {
|
|
margin: 0;
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: $navy;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
&__sub {
|
|
margin-top: 2px;
|
|
font-size: 12.5px;
|
|
color: #64748b;
|
|
}
|
|
}
|
|
|
|
/* ───────── Pill-style tab navigation ─────────
|
|
A plain wrapping flex row, not mat-tab-nav-bar — with 16 sections, Material's single-row strip
|
|
hides most of them behind prev/next pagination arrows. Wrapping keeps every tab visible and one
|
|
click away instead of a scroll-and-hunt. */
|
|
.ac-tabs {
|
|
margin-bottom: 20px;
|
|
background: #fff;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 14px;
|
|
padding: 6px;
|
|
box-shadow: 0 1px 3px rgb(15 23 42 / 4%);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ac-tab {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
height: 38px;
|
|
padding: 0 18px;
|
|
border-radius: 10px;
|
|
font-family: Inter, 'DM Sans', Roboto, sans-serif;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: #64748b;
|
|
background: transparent;
|
|
transition: all 0.15s ease;
|
|
white-space: nowrap;
|
|
border: 1px solid transparent;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
|
|
&__ic {
|
|
font-size: 13px;
|
|
color: inherit;
|
|
}
|
|
|
|
&:hover:not(.ac-tab--active) {
|
|
background: #f1f5f9;
|
|
color: $navy;
|
|
}
|
|
|
|
&.ac-tab--active {
|
|
background: linear-gradient(135deg, $blue 0%, $blue-d 100%);
|
|
color: #fff;
|
|
box-shadow: 0 2px 6px -1px rgb(30 64 175 / 35%);
|
|
border-color: $blue-d;
|
|
}
|
|
}
|
|
|
|
@media (width <= 768px) {
|
|
.ac-tab {
|
|
padding: 0 14px;
|
|
font-size: 12px;
|
|
}
|
|
}
|