145 lines
2.9 KiB
CSS
145 lines
2.9 KiB
CSS
:host {
|
|
display: inline-block;
|
|
|
|
width: 1em;
|
|
height: 1em;
|
|
|
|
contain: strict;
|
|
|
|
fill: currentColor;
|
|
|
|
box-sizing: content-box !important;
|
|
|
|
}
|
|
|
|
:host .ionicon {
|
|
stroke: currentColor;
|
|
}
|
|
|
|
.ionicon-fill-none {
|
|
fill: none;
|
|
}
|
|
|
|
.ionicon-stroke-width {
|
|
stroke-width: 32px;
|
|
stroke-width: var(--ionicon-stroke-width, 32px);
|
|
}
|
|
|
|
.icon-inner,
|
|
.ionicon,
|
|
svg {
|
|
display: block;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Icon RTL
|
|
* -----------------------------------------------------------
|
|
*/
|
|
|
|
/**
|
|
* Safari <16.4 incorrectly reports
|
|
* that it supports :dir(rtl) when it does not.
|
|
* This @supports statement lets us target
|
|
* WebKit browsers to apply the RTL fallback.
|
|
* -webkit-named-image only exists on WebKit.
|
|
* For WebKit browsers that do support :dir(rtl)
|
|
* (i.e. Safari >= 16.4) then the :dir(rtl)
|
|
* code farther down on the page will take
|
|
* effect and override this fallback.
|
|
*/
|
|
@supports (background: -webkit-named-image(i)) {
|
|
:host(.icon-rtl) .icon-inner {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Fallback for browsers that support
|
|
* neither :host-context nor :dir.
|
|
* The icon will not react to dir
|
|
* changes, but it will at least
|
|
* respect the dir on component load.
|
|
*/
|
|
@supports not selector(:dir(rtl)) and selector(:host-context([dir='rtl'])) {
|
|
:host(.icon-rtl) .icon-inner {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
/* :host-context is supported in chromium; :dir is supported in safari & firefox */
|
|
:host(.flip-rtl):host-context([dir='rtl']) .icon-inner {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
@supports selector(:dir(rtl)) {
|
|
:host(.flip-rtl:dir(rtl)) .icon-inner {
|
|
transform: scaleX(-1);
|
|
}
|
|
/**
|
|
* This is needed for WebKit otherwise the fallback
|
|
* will always cause the icon to be flipped if the document
|
|
* loads in RTL.
|
|
*/
|
|
:host(.flip-rtl:dir(ltr)) .icon-inner {
|
|
transform: scaleX(1);
|
|
}
|
|
}
|
|
|
|
/* Icon Sizes
|
|
* -----------------------------------------------------------
|
|
*/
|
|
|
|
:host(.icon-small) {
|
|
font-size: 1.125rem !important;
|
|
}
|
|
|
|
:host(.icon-large) {
|
|
font-size: 2rem !important;
|
|
}
|
|
|
|
/* Icon Colors
|
|
* -----------------------------------------------------------
|
|
*/
|
|
|
|
:host(.ion-color) {
|
|
color: var(--ion-color-base) !important;
|
|
}
|
|
|
|
:host(.ion-color-primary) {
|
|
--ion-color-base: var(--ion-color-primary, #3880ff);
|
|
}
|
|
|
|
:host(.ion-color-secondary) {
|
|
--ion-color-base: var(--ion-color-secondary, #0cd1e8);
|
|
}
|
|
|
|
:host(.ion-color-tertiary) {
|
|
--ion-color-base: var(--ion-color-tertiary, #f4a942);
|
|
}
|
|
|
|
:host(.ion-color-success) {
|
|
--ion-color-base: var(--ion-color-success, #10dc60);
|
|
}
|
|
|
|
:host(.ion-color-warning) {
|
|
--ion-color-base: var(--ion-color-warning, #ffce00);
|
|
}
|
|
|
|
:host(.ion-color-danger) {
|
|
--ion-color-base: var(--ion-color-danger, #f14141);
|
|
}
|
|
|
|
:host(.ion-color-light) {
|
|
--ion-color-base: var(--ion-color-light, #f4f5f8);
|
|
}
|
|
|
|
:host(.ion-color-medium) {
|
|
--ion-color-base: var(--ion-color-medium, #989aa2);
|
|
}
|
|
|
|
:host(.ion-color-dark) {
|
|
--ion-color-base: var(--ion-color-dark, #222428);
|
|
}
|