carlostellocba/aulas-unicaba-mvp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(home): ajustar ancho del segmento al 85% en iOS

Browse Source
This commit is contained in:
Carlos Facundo Tello
2026-08-29 01:53:02 -03:00
parent caa57d9aa9
commit fbc68001f4
2 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/home/home.page.scss
+20 -15
View File
@@ -131,27 +131,32 @@
.view-segment { .view-segment {
background: var(--ion-background-color); background: var(--ion-background-color);
padding: 10px; padding: 10px 0;
display: flex;
:host-context(.ios) & { justify-content: center;
padding: 6px 10px; align-items: center;
} width: 100%;
ion-segment { ion-segment {
:host-context(.ios) &, width: 100%;
&.ios { padding: 0 10px;
min-height: 29px;
ion-segment-button { &.ios {
min-height: 29px; width: 85% !important;
font-size: 0.9em; max-width: 85% !important;
--padding-start: 4px; margin-left: auto !important;
--padding-end: 4px; margin-right: auto !important;
--padding-top: 0; padding: 0 !important;
--padding-bottom: 0;
} }
} }
} }
:host-context(.ios) .view-segment ion-segment {
width: 85% !important;
max-width: 85% !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
} }
.card-header-flex { .card-header-flex {
src/global.scss
+9
View File
@@ -35,3 +35,12 @@
/* @import "@ionic/angular/css/palettes/dark.always.css"; */ /* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */ /* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css"; @import "@ionic/angular/css/palettes/dark.system.css";
/* iOS 85% width for Home segments */
.ios .view-segment ion-segment,
.view-segment ion-segment.ios {
width: 85% !important;
max-width: 85% !important;
margin-left: auto !important;
margin-right: auto !important;
}