/
githubmirror
/
ionic
Обзор
Документация
Войти
/
githubmirror
/
ionic
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
core/src/components/back-button/back-button.ios.scss
56 строк
1 KB
Liam DeBeasi
feat(a11y): add dynamic font scaling (#28314)
11 окт 2023, 00:38
Не верифицирован
11 окт 2023, 00:38
f806781
Код
Авторство
О чём код?
@import "./back-button"; @import "./back-button.ios.vars"; // iOS Back Button // -------------------------------------------------- :host { --background-hover: transparent; --background-hover-opacity: 1; --background-focused: currentColor; --background-focused-opacity: .1; --border-radius: 4px; --color: #{$back-button-ios-color}; --icon-margin-end: 1px; --icon-margin-start: -4px; /** * The icon should be sized relative * to the size of the text which is * why we use em here instead of rem. * This allows developers to override * the text font size while ensuring that * the icon is sized relative to that. */ --icon-font-size: 1.6em; --min-height: 32px; /** * Main content should be prioritized over the back * button which is why a maximum font size is applied. * Also, we want the text to remain readable * so a minimum font size is applied. * Using 1.294 instead of 1.3 aligns the text * with the icon a bit nicer in Firefox. */ font-size: dynamic-font-clamp(1, 17px, 1.294); } .button-native { transform: translateZ(0); overflow: visible; z-index: $back-button-ios-button-z-index; } // Back Button States // -------------------------------------------------- :host(.ion-activated) .button-native { opacity: .4; } @media (any-hover: hover) { :host(:hover) { opacity: .6; } }