Skip to content

Instantly share code, notes, and snippets.

@ZenulAbidin
Last active November 29, 2023 11:09
Show Gist options
  • Save ZenulAbidin/1ce2ae4190f6cc8318b71dc93e6b11a8 to your computer and use it in GitHub Desktop.
Save ZenulAbidin/1ce2ae4190f6cc8318b71dc93e6b11a8 to your computer and use it in GitHub Desktop.
.profile-info {
ion-label {
margin-right: 1em;
min-width: 7em;
line-height: 45px;
}
ion-input, ion-select {
min-height: 45px;
max-width: 50%;
min-width: 200px;
border: 1px solid #3a3a4a;
}
@media (max-width: 424px) {
ion-label, ion-input, ion-select {
font-size: 12px;
--font-size: 12px;
}
ion-select::part(icon) {
transform: unset;
}
}
ion-select::part(container) {
width: 100%;
}
ion-select::part(icon) {
margin-right: 10px;
transform: scale(1.5);
}
@media (max-width: 374px) {
ion-input, ion-select {
min-width: 150px;
}
}
ion-input ion-select {
max-width: unset;
min-width: unset;
border: unset;
border-right: 1px solid #3a3a4a;
pointer-events: all;
}
ion-input ion-select::part(text), ion-input ion-select::part(placeholder) {
width: 24px;
text-overflow: clip;
}
ion-input {
--padding-start: 10px !important;
}
ion-input:has(ion-select) {
--padding-start: 0px !important;
}
ion-input ion-select::part(container) {
width: auto;
}
ion-select {
--padding-bottom: 10px !important;
--padding-top: 10px !important;
--padding-start: 10px !important;
}
.country-codes ::ng-deep ion-item {
font-size: 10px;
}
ion-row {
display: flex;
margin-bottom: 10px;
}
}
::ng-deep .country-codes {
--width: 95%;
--max-width: 320px;
--max-height: 50%;
ion-radio {
font-size: smaller;
}
::part(container) {
display: none;
}
::ng-deep ion-select-popover ion-list, ::ng-deep ion-select-popover ion-list ion-item {
--background: #f2f2f2 !important;
background: #f2f2f2 !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment