/* * ============================================================ * ZOHO DESIGN SYSTEM — Component Classes * ============================================================ * Consumer layer: CSS classes that reference component tokens * from zoho-design-tokens.css. Import both files together: * * @import 'zoho-design-tokens.css'; * @import 'zoho-components.css'; * * Theming is automatic — set data-theme on or any ancestor. * ============================================================ */ /* ============================================================ * BUTTON * ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--btn-gap); height: var(--btn-height); padding: 0 var(--btn-padding-x); border: 1px solid transparent; border-radius: var(--btn-radius); font-family: var(--font-family-primary); font-size: var(--btn-font-size); line-height: 1; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; text-decoration: none; } .btn:focus-visible { outline: none; box-shadow: var(--btn-focus-ring); } /* Primary */ .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); font-weight: var(--btn-primary-font-weight); } .btn--primary:hover { background: var(--btn-primary-bg-hover); } /* Secondary */ .btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border); font-weight: var(--btn-secondary-font-weight); } .btn--secondary:hover { background: var(--btn-secondary-bg-hover); } /* Ghost */ .btn--ghost { background: var(--btn-ghost-bg); color: var(--btn-ghost-text); font-weight: var(--btn-primary-font-weight); } .btn--ghost:hover { background: var(--btn-ghost-bg-hover); } /* Disabled (works with any variant) */ .btn--disabled, .btn:disabled { background: var(--btn-disabled-bg); color: var(--btn-disabled-text); border-color: var(--btn-disabled-border); cursor: not-allowed; pointer-events: none; } /* Small */ .btn--sm { height: var(--btn-sm-height); padding: 0 var(--btn-sm-padding-x); font-size: var(--font-size-xs); } /* ============================================================ * CARD * ============================================================ */ .card { background: var(--card-bg); border: var(--card-border-width) solid var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: var(--card-gap); } .card--selected { border-color: var(--card-border-selected); } .card--compact { padding: var(--card-padding-compact); } /* ============================================================ * INPUT * ============================================================ */ .input-label { display: block; font-size: var(--input-label-font-size); font-weight: var(--input-label-font-weight); color: var(--input-label-color); margin-bottom: var(--input-label-gap); } .input { display: block; width: 100%; height: var(--input-height); padding: 0 var(--input-padding-x); background: var(--input-bg); color: var(--input-text); border: var(--input-border-width) solid var(--input-border); border-radius: var(--input-radius); font-family: var(--font-family-primary); font-size: var(--input-font-size); transition: border-color var(--transition-fast); box-sizing: border-box; } .input::placeholder { color: var(--input-placeholder); } .input:hover { border-color: var(--input-border-hover); } .input:focus { outline: none; border-color: var(--input-border-focus); } /* Error */ .input--error { border-color: var(--input-border-error); } .input--error:focus { border-color: var(--input-border-error); } /* Disabled */ .input--disabled, .input:disabled { background: var(--input-disabled-bg); color: var(--input-disabled-text); border-color: var(--input-disabled-border); cursor: not-allowed; } /* Small */ .input--sm { height: var(--input-sm-height); } /* ============================================================ * TABLE * ============================================================ */ .table { width: 100%; border-collapse: collapse; font-size: var(--table-cell-font-size); } .table th, .table .table__header { background: var(--table-header-bg); color: var(--table-header-text); font-size: var(--table-header-font-size); font-weight: var(--table-header-font-weight); padding: var(--table-header-padding-y) var(--table-header-padding-x); text-align: left; border-bottom: var(--table-border-width) solid var(--table-border); } .table td, .table .table__cell { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); border-bottom: var(--table-border-width) solid var(--table-border); } .table tr:hover td, .table .table__row--hover td { background: var(--table-row-bg-hover); } .table .table__row--selected td { background: var(--table-row-bg-selected); } .table .table__row--stripe td { background: var(--table-row-bg-stripe); } /* ============================================================ * ALERT * ============================================================ */ /* Banner (inline notification bar) */ .alert { display: flex; align-items: center; gap: var(--space-2); min-height: var(--alert-banner-height); padding: 0 var(--alert-banner-padding); border-radius: var(--alert-banner-radius); font-size: var(--btn-font-size); font-weight: var(--font-weight-medium); } .alert--info { background: var(--alert-info-bg); color: var(--alert-info-icon); } .alert--success { background: var(--alert-success-bg); color: var(--alert-success-icon); } .alert--warning { background: var(--alert-warning-bg); color: var(--alert-warning-icon); } .alert--error { background: var(--alert-error-bg); color: var(--alert-error-icon); } /* Dialog (modal-style alert with title + body) */ .alert--dialog { flex-direction: column; align-items: flex-start; min-height: auto; padding: var(--alert-dialog-padding); border-radius: var(--alert-dialog-radius); gap: var(--alert-dialog-gap); } .alert__title { font-size: var(--alert-dialog-title-size); font-weight: var(--alert-dialog-title-weight); } .alert__body { font-size: var(--alert-dialog-body-size); font-weight: var(--font-weight-regular); } /* ============================================================ * TOOLTIP * ============================================================ */ .tooltip { display: inline-flex; align-items: center; min-height: var(--tooltip-min-height); padding: var(--tooltip-padding); background: var(--tooltip-bg); color: var(--tooltip-text); border-radius: var(--tooltip-radius); font-size: var(--tooltip-font-size); z-index: var(--tooltip-z-index); position: relative; } .tooltip--callout { min-height: var(--tooltip-callout-min-height); } /* Tooltip arrow (bottom-pointing, shown below tooltip) */ .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: calc(var(--tooltip-pointer-size) / 2) solid transparent; border-top-color: var(--tooltip-bg); } /* ============================================================ * BADGE * ============================================================ */ .badge { display: inline-flex; align-items: center; padding: var(--badge-padding-y) var(--badge-padding-x); border-radius: var(--badge-radius); font-size: var(--badge-font-size); font-weight: var(--badge-font-weight); line-height: 1; white-space: nowrap; } .badge--success { background: var(--badge-success-bg); color: var(--badge-success-text); } .badge--warning { background: var(--badge-warning-bg); color: var(--badge-warning-text); } .badge--error { background: var(--badge-error-bg); color: var(--badge-error-text); } .badge--info { background: var(--badge-info-bg); color: var(--badge-info-text); } .badge--neutral { background: var(--badge-neutral-bg); color: var(--badge-neutral-text); }