framework7/components/chip/chip-rtl.css

Full featured mobile HTML framework for building iOS & Android apps

:root{--f7-chip-font-size:14px;--f7-chip-media-font-size:16px;--f7-chip-delete-button-color:#000}:root .dark,:root.dark{--f7-chip-delete-button-color:#fff}.ios{--f7-chip-height:28px;--f7-chip-media-size:28px;--f7-chip-padding-horizontal:10px;--f7-chip-border-radius:28px;--f7-chip-font-weight:normal;--f7-chip-outline-border-color:#0000001f;--f7-chip-bg-color:#0000001f;--f7-chip-text-color:#000;--f7-chip-outline-text-color:#000}.ios .dark,.ios.dark{--f7-chip-bg-color:#333;--f7-chip-text-color:#fff;--f7-chip-outline-text-color:#fff;--f7-chip-outline-border-color:#ffffff1f}.md{--f7-chip-font-weight:500;--f7-chip-media-size:24px;--f7-chip-height:32px;--f7-chip-padding-horizontal:12px;--f7-chip-border-radius:8px}.md,.md .dark,.md [class*=color-]{--f7-chip-bg-color:var(--f7-md-secondary-container);--f7-chip-text-color:var(--f7-md-on-secondary-container);--f7-chip-outline-text-color:var(--f7-md-on-surface);--f7-chip-outline-border-color:var(--f7-md-outline)}.chip{background-color:var(--f7-chip-bg-color);border-radius:var(--f7-chip-border-radius);color:var(--f7-chip-text-color);display:inline-flex;font-size:var(--f7-chip-font-size);font-weight:var(--f7-chip-font-weight);height:var(--f7-chip-height);line-height:var(--f7-chip-height);margin:2px 0;padding-left:var(--f7-chip-padding-horizontal);padding-right:var(--f7-chip-padding-horizontal);position:relative}.chip,.chip-media{align-items:center;box-sizing:border-box;vertical-align:middle}.chip-media{border-radius:50%;border-radius:var(--f7-chip-media-size);color:#fff;display:flex;flex-shrink:0;font-size:var(--f7-chip-media-font-size);height:var(--f7-chip-media-size);justify-content:center;line-height:var(--f7-chip-media-size);text-align:center;width:var(--f7-chip-media-size)}.chip-media i.icon{font-size:calc(var(--f7-chip-media-size) - 8px);height:calc(var(--f7-chip-media-size) - 8px)}.chip-media img{border-radius:50%;display:block;height:auto;max-height:100%;max-width:100%;width:auto}.chip-media+.chip-label{margin-right:4px}.chip-label{flex-shrink:1;min-width:0;overflow:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap}.chip-delete{background-repeat:no-repeat;color:var(--f7-chip-delete-button-color);cursor:pointer;flex-shrink:0;height:24px;opacity:.54;position:relative;text-align:center;width:24px}.chip-delete:after{font-family:framework7-core-icons;font-style:normal;font-weight:400;letter-spacing:normal;line-height:1;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;display:block;font-feature-settings:"liga";font-size:20px;height:100%;line-height:24px;text-align:center;width:100%}.chip .chip-delete.active-state{opacity:1}.chip-outline,.ios .chip-outline-ios,.md .chip-outline-md{background:none;border:1px solid var(--f7-chip-outline-border-color);color:var(--f7-chip-outline-text-color)}.ios .chip[class*=color-]{--f7-chip-bg-color:var(--f7-theme-color);--f7-chip-text-color:#fff}.ios .chip-outline-ios[class*=color-],.ios .chip-outline[class*=color-]{--f7-chip-outline-border-color:var(--f7-theme-color);--f7-chip-outline-text-color:var(--f7-theme-color)}.ios .chip-media{margin-right:calc(var(--f7-chip-padding-horizontal)*-1)}.ios .chip-delete{margin-left:calc(var(--f7-chip-padding-horizontal)*-1)}.ios .chip-delete:after{content:"delete_round_ios";font-size:10px}.md .chip-media{margin-right:calc(var(--f7-chip-padding-horizontal)*-1 + 4px)}.md .chip-label+.chip-delete{margin-right:4px}.md .chip-delete{margin-left:calc(var(--f7-chip-padding-horizontal)*-1 + 4px)}.md .chip-delete:after{content:"delete_round_md";font-size:16px}