framework7/lazy-components/chip.rtl.css

Full featured mobile HTML framework for building iOS & Android apps

.chip{font-weight:400;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:middle;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:2px 0}.chip-media{border-radius:50%;text-align:center;color:#fff;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}.chip-media img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:50%;display:block}.chip-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;min-width:0}.chip-delete{text-align:center;cursor:pointer;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;background-repeat:no-repeat}.chip .chip-delete.active-state{opacity:1}.ios .chip{font-size:13px;color:#000;background:rgba(0,0,0,.12);height:24px;border-radius:12px;padding:0 10px}.ios .chip-outline{background:0 0;border:1px solid rgba(0,0,0,.12)}.ios .chip-media{width:24px;height:24px;vertical-align:middle;border-radius:50%;text-align:center;line-height:16px;color:#fff;font-size:12px;-webkit-box-sizing:border-box;box-sizing:border-box;margin-right:-10px}.ios .chip-media+.chip-label{margin-right:4px}.ios .chip-media i.icon{font-size:16px;height:16px}.ios .chip-delete{width:24px;height:24px;line-height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%23000'%2F%3E%3Cline%20stroke%3D'%23fff'%20stroke-width%3D'3'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23fff'%20stroke-width%3D'3'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E");background-position:center;background-size:14px 14px;opacity:.54;margin-left:-10px}.ios .theme-dark .chip{background-color:#333;color:#fff}.ios .theme-dark .chip-outline{background:0 0;border-color:#333}.ios .theme-dark .chip-delete{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2028%2028'%3E%3Ccircle%20cx%3D'14'%20cy%3D'14'%20r%3D'14'%20fill%3D'%23fff'%2F%3E%3Cline%20stroke%3D'%23000'%20stroke-width%3D'3'%20stroke-miterlimit%3D'10'%20x1%3D'8'%20y1%3D'8'%20x2%3D'20'%20y2%3D'20'%2F%3E%3Cline%20fill%3D'none'%20stroke%3D'%23000'%20stroke-width%3D'3'%20stroke-miterlimit%3D'10'%20x1%3D'20'%20y1%3D'8'%20x2%3D'8'%20y2%3D'20'%2F%3E%3C%2Fsvg%3E")}.ios .chip.color-red{background:#ff3b30;color:#fff}.ios .chip.color-red.chip-outline{background:0 0;border-color:#ff3b30;color:#ff3b30}.ios .chip.color-green{background:#4cd964;color:#fff}.ios .chip.color-green.chip-outline{background:0 0;border-color:#4cd964;color:#4cd964}.ios .chip.color-blue{background:#007aff;color:#fff}.ios .chip.color-blue.chip-outline{background:0 0;border-color:#007aff;color:#007aff}.ios .chip.color-pink{background:#ff2d55;color:#fff}.ios .chip.color-pink.chip-outline{background:0 0;border-color:#ff2d55;color:#ff2d55}.ios .chip.color-yellow{background:#fc0;color:#fff}.ios .chip.color-yellow.chip-outline{background:0 0;border-color:#fc0;color:#fc0}.ios .chip.color-orange{background:#ff9500;color:#fff}.ios .chip.color-orange.chip-outline{background:0 0;border-color:#ff9500;color:#ff9500}.ios .chip.color-gray{background:#8e8e93;color:#fff}.ios .chip.color-gray.chip-outline{background:0 0;border-color:#8e8e93;color:#8e8e93}.ios .chip.color-white{background:#fff;color:#fff}.ios .chip.color-white.chip-outline{background:0 0;border-color:#fff;color:#fff}.ios .chip.color-black{background:#000;color:#fff}.ios .chip.color-black.chip-outline{background:0 0;border-color:#000;color:#000}.md .chip{font-size:13px;color:rgba(0,0,0,.87);background:rgba(0,0,0,.12);height:32px;line-height:32px;border-radius:16px;padding:0 12px}.md .chip-outline{background:0 0;border:1px solid rgba(0,0,0,.12)}.md .chip-media{width:32px;height:32px;vertical-align:top;border-radius:50%;text-align:center;line-height:32px;color:#fff;font-size:16px;margin-right:-12px}.md .chip-media+.chip-label{margin-right:8px}.md .chip-label+.chip-delete{margin-right:4px}.md .chip-delete{margin-right:-8px;width:24px;height:24px;line-height:24px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23000'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M12%202C6.47%202%202%206.47%202%2012s4.47%2010%2010%2010%2010-4.47%2010-10S17.53%202%2012%202zm5%2013.59L15.59%2017%2012%2013.41%208.41%2017%207%2015.59%2010.59%2012%207%208.41%208.41%207%2012%2010.59%2015.59%207%2017%208.41%2013.41%2012%2017%2015.59z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");background-position:center;background-size:20px 20px;opacity:.54;margin-left:-8px}.md .theme-dark .chip{background:#333;color:rgba(255,255,255,.87)}.md .theme-dark .chip-outline{background:0 0;border-color:#333}.md .theme-dark .chip-delete{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23fff'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M12%202C6.47%202%202%206.47%202%2012s4.47%2010%2010%2010%2010-4.47%2010-10S17.53%202%2012%202zm5%2013.59L15.59%2017%2012%2013.41%208.41%2017%207%2015.59%2010.59%2012%207%208.41%208.41%207%2012%2010.59%2015.59%207%2017%208.41%2013.41%2012%2017%2015.59z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E")}.md .chip.color-red{background:#f44336;color:#fff}.md .chip.color-red.chip-outline{background:0 0;border-color:#f44336;color:#f44336}.md .chip.color-green{background:#4caf50;color:#fff}.md .chip.color-green.chip-outline{background:0 0;border-color:#4caf50;color:#4caf50}.md .chip.color-blue{background:#2196f3;color:#fff}.md .chip.color-blue.chip-outline{background:0 0;border-color:#2196f3;color:#2196f3}.md .chip.color-pink{background:#e91e63;color:#fff}.md .chip.color-pink.chip-outline{background:0 0;border-color:#e91e63;color:#e91e63}.md .chip.color-yellow{background:#ffeb3b;color:#fff}.md .chip.color-yellow.chip-outline{background:0 0;border-color:#ffeb3b;color:#ffeb3b}.md .chip.color-orange{background:#ff9800;color:#fff}.md .chip.color-orange.chip-outline{background:0 0;border-color:#ff9800;color:#ff9800}.md .chip.color-gray{background:#9e9e9e;color:#fff}.md .chip.color-gray.chip-outline{background:0 0;border-color:#9e9e9e;color:#9e9e9e}.md .chip.color-white{background:#fff;color:#fff}.md .chip.color-white.chip-outline{background:0 0;border-color:#fff;color:#fff}.md .chip.color-black{background:#000;color:#fff}.md .chip.color-black.chip-outline{background:0 0;border-color:#000;color:#000}