framework7/components/chip/chip-vars.less

Full featured mobile HTML framework for building iOS & Android apps

:root {
  --f7-chip-font-size: 14px;
  --f7-chip-media-font-size: 16px;
  .light-vars({
    --f7-chip-delete-button-color: #000;
  });
  .dark-vars({
    --f7-chip-delete-button-color: #fff;
  });
}
.ios-vars({
  --f7-chip-height: 28px;
  --f7-chip-media-size: 28px;
  --f7-chip-padding-horizontal: 10px;
  --f7-chip-border-radius: 28px;
  --f7-chip-font-weight: normal;
  .light-vars({
    --f7-chip-outline-border-color: rgba(0, 0, 0, 0.12);
    --f7-chip-bg-color: rgba(0, 0, 0, 0.12);
    --f7-chip-text-color: #000;
    --f7-chip-outline-text-color: #000;
  });
  .dark-vars({
    --f7-chip-bg-color: #333;
    --f7-chip-text-color: #fff;
    --f7-chip-outline-text-color: #fff;
    --f7-chip-outline-border-color: rgba(255, 255, 255, 0.12);
  });
});
.md-vars({
  --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-color-vars({
  --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);
});