/* ========================================================================== ELX UI ยท Components ========================================================================== */ /* ========================================================================== BUTTON ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-button{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-button-background: var(--elx-surface); --elx-button-background-hover: var(--elx-button-background); --elx-button-color: var(--elx-text); --elx-button-border: var(--elx-border); --elx-button-border-hover: var(--elx-button-border); --elx-button-shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 10px rgb(0 0 0 / .03); --elx-button-shadow-hover: var(--elx-button-shadow); --elx-button-transform-hover: translateY(-1px); --elx-button-transform-active: translateY(0); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; position:relative; align-items:center; justify-content:center; gap:var(--elx-space-sm); flex-shrink:0; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-control-height-md); /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: 0 var(--elx-space-lg); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) var(--elx-button-border); border-radius: var(--elx-control-radius); background: linear-gradient( 180deg, var(--elx-button-background-hover), var(--elx-button-background) ); color: var(--elx-button-color); box-shadow: var(--elx-button-shadow); /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-md); font-weight: var(--elx-font-bold); line-height: var(--elx-line-none); white-space: nowrap; text-align: center; letter-spacing:.01em; /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; user-select:none; transition: background-color var(--elx-transition), color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition), transform var(--elx-transition); } /* |-------------------------------------------------------------------------- | STATES |-------------------------------------------------------------------------- */ .elx-button:focus-visible{ outline:none; border-color: var(--elx-button-border-hover); box-shadow: var(--elx-focus-ring), var(--elx-button-shadow-hover); } .elx-button:hover{ background: linear-gradient( 180deg, var(--elx-button-background-hover), var(--elx-button-background-hover) ); border-color: var(--elx-button-border-hover); box-shadow: var(--elx-button-shadow-hover); transform: var(--elx-button-transform-hover); } .elx-button:active{ transform: var(--elx-button-transform-active); } .elx-button:disabled{ opacity: var(--elx-opacity-disabled); cursor: not-allowed; pointer-events:none; } /* |-------------------------------------------------------------------------- | VARIANTS |-------------------------------------------------------------------------- */ .elx-button-primary{ --elx-button-background: var(--elx-accent); --elx-button-background-hover: var(--elx-accent-hover); --elx-button-color: var(--elx-white); --elx-button-border: var(--elx-accent); --elx-button-border-hover: var(--elx-accent-hover); } .elx-button-success{ --elx-button-background: var(--elx-success); --elx-button-background-hover: var(--elx-success-hover); --elx-button-color: var(--elx-white); --elx-button-border: var(--elx-success); --elx-button-border-hover: var(--elx-success-hover); } .elx-button-warning{ --elx-button-background: var(--elx-warning); --elx-button-background-hover: var(--elx-warning-hover); --elx-button-color: var(--elx-white); --elx-button-border: var(--elx-warning); --elx-button-border-hover: var(--elx-warning-hover); } .elx-button-danger{ --elx-button-background: var(--elx-danger); --elx-button-background-hover: var(--elx-danger-hover); --elx-button-color: var(--elx-white); --elx-button-border: var(--elx-danger); --elx-button-border-hover: var(--elx-danger-hover); } .elx-button-outline{ --elx-button-background: transparent; --elx-button-background-hover: var(--elx-accent-soft); --elx-button-color: var(--elx-accent); --elx-button-border: var(--elx-accent); --elx-button-border-hover: var(--elx-accent-hover); } .elx-button-ghost{ --elx-button-background: transparent; --elx-button-background-hover: var(--elx-accent-soft); --elx-button-color: var(--elx-accent); --elx-button-border: transparent; --elx-button-border-hover: transparent; --elx-button-transform-hover: none; } /* |-------------------------------------------------------------------------- | SIZES |-------------------------------------------------------------------------- */ .elx-button-sm{ min-height: var(--elx-control-height-sm); padding: 0 var(--elx-space-md); font-size: var(--elx-font-sm); } .elx-button-md{ min-height: var(--elx-control-height-md); } .elx-button-lg{ min-height: var(--elx-control-height-lg); padding: 0 var(--elx-space-xl); font-size: var(--elx-font-lg); } /* ========================================================================== ICON BUTTON ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-icon-button{ width: var(--elx-control-height-md); min-width: var(--elx-control-height-md); padding:0; } /* ========================================================================== INPUT ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-input{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-input-background: var(--elx-surface); --elx-input-background-focus: var(--elx-surface); --elx-input-color: var(--elx-text); --elx-input-placeholder: var(--elx-text-muted); --elx-input-border: var(--elx-border); --elx-input-border-focus: var(--elx-accent); --elx-input-shadow: none; --elx-input-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; width:100%; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-control-height-md); /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: 0 var(--elx-space-md); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) var(--elx-input-border); border-radius: var(--elx-control-radius); background-color: var(--elx-input-background); color: var(--elx-input-color); box-shadow: var(--elx-input-shadow); /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-md); font-weight: var(--elx-font-normal); line-height: var(--elx-line-none); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ transition: background-color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition), color var(--elx-transition); } /* |-------------------------------------------------------------------------- | STATES |-------------------------------------------------------------------------- */ .elx-input::placeholder{ color: var(--elx-input-placeholder); font-weight: var(--elx-font-normal); } .elx-input:focus{ border-color: var(--elx-input-border-focus); background-color: var(--elx-input-background-focus); box-shadow: var(--elx-input-shadow-focus); } .elx-input:disabled{ opacity: var(--elx-opacity-disabled); cursor: not-allowed; } /* |-------------------------------------------------------------------------- | SIZES |-------------------------------------------------------------------------- */ .elx-input-sm{ min-height: var(--elx-control-height-sm); font-size: var(--elx-font-sm); } .elx-input-md{ min-height: var(--elx-control-height-md); } .elx-input-lg{ min-height: var(--elx-control-height-lg); font-size: var(--elx-font-lg); } /* ========================================================================== TEXTAREA ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-textarea{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-textarea-background: var(--elx-surface); --elx-textarea-background-focus: var(--elx-surface); --elx-textarea-color: var(--elx-text); --elx-textarea-placeholder: var(--elx-text-muted); --elx-textarea-border: var(--elx-border); --elx-textarea-border-focus: var(--elx-accent); --elx-textarea-shadow: none; --elx-textarea-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; width:100%; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-control-textarea-min-height); /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: var(--elx-space-md); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) var(--elx-textarea-border); border-radius: var(--elx-control-radius); background-color: var(--elx-textarea-background); color: var(--elx-textarea-color); box-shadow: var(--elx-textarea-shadow); resize:vertical; /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-md); font-weight: var(--elx-font-normal); line-height: var(--elx-line-normal); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ transition: background-color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition), color var(--elx-transition); } /* |-------------------------------------------------------------------------- | STATES |-------------------------------------------------------------------------- */ .elx-textarea::placeholder{ color: var(--elx-textarea-placeholder); font-weight: var(--elx-font-normal); } .elx-textarea:focus{ border-color: var(--elx-textarea-border-focus); background-color: var(--elx-textarea-background-focus); box-shadow: var(--elx-textarea-shadow-focus); } .elx-textarea:disabled{ opacity: var(--elx-opacity-disabled); cursor: not-allowed; } /* ========================================================================== SELECT ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-select{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-select-background: var(--elx-surface); --elx-select-background-focus: var(--elx-surface); --elx-select-color: var(--elx-text); --elx-select-border: var(--elx-border); --elx-select-border-focus: var(--elx-accent); --elx-select-shadow: none; --elx-select-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; width:100%; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-control-height-md); /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: 0 calc( var(--elx-space-md) + var(--elx-control-icon-size) + var(--elx-space-sm) ) 0 var(--elx-space-md); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) var(--elx-select-border); border-radius: var(--elx-control-radius); background-color: var(--elx-select-background); color: var(--elx-select-color); box-shadow: var(--elx-select-shadow); /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-md); font-weight: var(--elx-font-normal); line-height: var(--elx-line-none); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; transition: background-color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition), color var(--elx-transition); } /* |-------------------------------------------------------------------------- | STATES |-------------------------------------------------------------------------- */ .elx-select:focus{ border-color: var(--elx-select-border-focus); background-color: var(--elx-select-background-focus); box-shadow: var(--elx-select-shadow-focus); } .elx-select:disabled{ opacity: var(--elx-opacity-disabled); cursor: not-allowed; } /* |-------------------------------------------------------------------------- | SIZES |-------------------------------------------------------------------------- */ .elx-select-sm{ min-height: var(--elx-control-height-sm); font-size: var(--elx-font-sm); } .elx-select-md{ min-height: var(--elx-control-height-md); } .elx-select-lg{ min-height: var(--elx-control-height-lg); font-size: var(--elx-font-lg); } /* ========================================================================== CHECKBOX ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-checkbox{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-checkbox-size:22px; --elx-checkbox-background: var(--elx-surface); --elx-checkbox-background-checked: var(--elx-accent); --elx-checkbox-border: var(--elx-border); --elx-checkbox-border-checked: var(--elx-accent); --elx-checkbox-color: var(--elx-white); --elx-checkbox-shadow: none; --elx-checkbox-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; gap:10px; place-content:center; flex-shrink:0; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ width: var(--elx-checkbox-size); height: var(--elx-checkbox-size); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) var(--elx-checkbox-border); border-radius: var(--elx-radius-sm); background-color: var(--elx-checkbox-background); box-shadow: var(--elx-checkbox-shadow); appearance:none; -webkit-appearance:none; /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; transition: background-color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition); } .elx-checkbox::after{ content:""; width:6px; height:12px; border: solid var(--elx-checkbox-color); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--elx-transition); } .elx-checkbox:checked{ background-color: var(--elx-checkbox-background-checked); border-color: var(--elx-checkbox-border-checked); } .elx-checkbox:checked::after{ transform: rotate(45deg) scale(1); } .elx-checkbox:focus-visible{ outline:none; box-shadow: var(--elx-checkbox-shadow-focus); } .elx-checkbox:disabled{ opacity: var(--elx-opacity-disabled); cursor: not-allowed; } /* ========================================================================== RADIO ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-radio{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-radio-size:22px; --elx-radio-background: var(--elx-surface); --elx-radio-background-checked: var(--elx-surface); --elx-radio-border: var(--elx-border); --elx-radio-border-checked: var(--elx-accent); --elx-radio-dot: var(--elx-accent); --elx-radio-shadow: none; --elx-radio-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; gap:10px; place-content:center; flex-shrink:0; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ width: var(--elx-radio-size); height: var(--elx-radio-size); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ appearance:none; -webkit-appearance:none; border: var(--elx-border-width) var(--elx-border-style) var(--elx-radio-border); border-radius:50%; background: var(--elx-radio-background); box-shadow: var(--elx-radio-shadow); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; transition: background-color var(--elx-transition), border-color var(--elx-transition), box-shadow var(--elx-transition); } .elx-radio::after{ content:""; width:10px; height:10px; border-radius:50%; background: var(--elx-radio-dot); transform:scale(0); transition: transform var(--elx-transition); } .elx-radio:checked{ border-color: var(--elx-radio-border-checked); } .elx-radio:checked::after{ transform:scale(1); } .elx-radio:focus-visible{ outline:none; box-shadow: var(--elx-radio-shadow-focus); } .elx-radio:disabled{ opacity: var(--elx-opacity-disabled); cursor:not-allowed; } /* ========================================================================== SWITCH ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-switch{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-switch-width:48px; --elx-switch-height:28px; --elx-switch-thumb:22px; --elx-switch-background: #d4d4d8; --elx-switch-background-checked: var(--elx-accent); --elx-switch-thumb-background: var(--elx-white); --elx-switch-shadow-focus: var(--elx-focus-ring); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-block; position:relative; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ width: var(--elx-switch-width); height: var(--elx-switch-height); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ appearance:none; -webkit-appearance:none; border:none; border-radius: var(--elx-radius-full); background: var(--elx-switch-background); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; transition: background-color var(--elx-transition), box-shadow var(--elx-transition); } .elx-switch::after{ content:""; position:absolute; top:3px; left:3px; width: var(--elx-switch-thumb); height: var(--elx-switch-thumb); border-radius:50%; background: var(--elx-switch-thumb-background); transition: transform var(--elx-transition); } .elx-switch:checked{ background: var(--elx-switch-background-checked); } .elx-switch:checked::after{ transform: translateX(20px); } .elx-switch:focus-visible{ outline:none; box-shadow: var(--elx-switch-shadow-focus); } .elx-switch:disabled{ opacity: var(--elx-opacity-disabled); cursor:not-allowed; } /* ========================================================================== DIVIDER ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-divider{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; width:100%; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ height:1px; /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border:0; background: var(--elx-border); } /* ========================================================================== DIVIDER ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-divider{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; width:100%; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ height:1px; /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border:0; background: var(--elx-border); } /* ========================================================================== BADGE ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-badge{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-badge-background: var(--elx-accent-soft); --elx-badge-color: var(--elx-accent); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; justify-content:center; /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: 0 var(--elx-badge-padding-x); gap: var(--elx-badge-gap); /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-badge-height); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border-radius: var(--elx-radius-full); background: var(--elx-badge-background); color: var(--elx-badge-color); white-space:nowrap; /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-sm); font-weight: var(--elx-font-semibold); line-height: var(--elx-line-none); } /* |-------------------------------------------------------------------------- | VARIANTS |-------------------------------------------------------------------------- */ .elx-badge-success{ --elx-badge-background: var(--elx-success-soft); --elx-badge-color: var(--elx-success); } .elx-badge-warning{ --elx-badge-background: var(--elx-warning-soft); --elx-badge-color: var(--elx-warning); } .elx-badge-danger{ --elx-badge-background: var(--elx-danger-soft); --elx-badge-color: var(--elx-danger); } .elx-badge-outline{ --elx-badge-background: transparent; border: var(--elx-border-width) var(--elx-border-style) var(--elx-border); } /* ========================================================================== CHIP ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-chip{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; justify-content:center; /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ padding: 0 var(--elx-badge-padding-x); gap: var(--elx-badge-gap); /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ min-height: var(--elx-badge-height); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-border-width) var(--elx-border-style) transparent; border-radius: var(--elx-radius-full); background: var(--elx-accent-soft); color: var(--elx-accent); /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-font-sm); font-weight: var(--elx-font-medium); line-height: var(--elx-line-none); /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ cursor:pointer; transition: background-color var(--elx-transition), border-color var(--elx-transition), color var(--elx-transition); } .elx-chip:hover{ background: var(--elx-border); } .elx-chip:active{ transform: scale(.98); } /* ========================================================================== CARD ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-card{ /* |-------------------------------------------------------------------------- | Component Tokens |-------------------------------------------------------------------------- */ --elx-card-background: var(--elx-surface); --elx-card-border: var(--elx-border); --elx-card-shadow: var(--elx-shadow-sm); /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:flex; flex-direction:column; /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ gap: var(--elx-card-gap); padding: var(--elx-card-padding); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ background: var(--elx-card-background); border: var(--elx-border-width) var(--elx-border-style) var(--elx-card-border); border-radius: var(--elx-card-radius); box-shadow: var(--elx-card-shadow); } /* |-------------------------------------------------------------------------- | HEADER |-------------------------------------------------------------------------- */ .elx-card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap: var(--elx-space-md); } /* |-------------------------------------------------------------------------- | BODY |-------------------------------------------------------------------------- */ .elx-card-body{ display:flex; flex-direction:column; gap: var(--elx-space-md); } /* |-------------------------------------------------------------------------- | FOOTER |-------------------------------------------------------------------------- */ .elx-card-footer{ display:flex; align-items:center; justify-content:flex-end; gap: var(--elx-space-sm); } /* |-------------------------------------------------------------------------- | TITLE |-------------------------------------------------------------------------- */ .elx-card-title{ margin:0; font-size: var(--elx-font-lg); font-weight: var(--elx-font-bold); line-height: var(--elx-line-tight); } /* |-------------------------------------------------------------------------- | SUBTITLE |-------------------------------------------------------------------------- */ .elx-card-subtitle{ margin:0; color: var(--elx-text-muted); font-size: var(--elx-font-sm); } /* ========================================================================== AVATAR ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-avatar{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ width: var(--elx-avatar-md); height: var(--elx-avatar-md); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border-radius: var(--elx-avatar-radius); background: var(--elx-avatar-background); } /* |-------------------------------------------------------------------------- | IMAGE |-------------------------------------------------------------------------- */ .elx-avatar img{ width:100%; height:100%; object-fit:cover; } /* |-------------------------------------------------------------------------- | PLACEHOLDER |-------------------------------------------------------------------------- */ .elx-avatar i{ color: var(--elx-text-muted); font-size: 1.2em; } /* |-------------------------------------------------------------------------- | SIZES |-------------------------------------------------------------------------- */ .elx-avatar-sm{ width: var(--elx-avatar-sm); height: var(--elx-avatar-sm); } .elx-avatar-md{ width: var(--elx-avatar-md); height: var(--elx-avatar-md); } .elx-avatar-lg{ width: var(--elx-avatar-lg); height: var(--elx-avatar-lg); } .elx-avatar-xl{ width: var(--elx-avatar-xl); height: var(--elx-avatar-xl); } /* ========================================================================== IMAGE ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-image{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:block; overflow:hidden; /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border-radius: var(--elx-image-radius); background: var(--elx-image-background); } .elx-image img{ display:block; width:100%; height:100%; object-fit:cover; } /* ========================================================================== COVER ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-cover{ aspect-ratio:16 / 9; } /* ========================================================================== PLACEHOLDER ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-placeholder{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color: var(--elx-text-muted); background: var(--elx-image-background); } /* ========================================================================== ICON ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-icon{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; /* |-------------------------------------------------------------------------- | Typography |-------------------------------------------------------------------------- */ font-size: var(--elx-icon-md); line-height:1; } /* |-------------------------------------------------------------------------- | SIZES |-------------------------------------------------------------------------- */ .elx-icon-xs{ font-size: var(--elx-icon-xs); } .elx-icon-sm{ font-size: var(--elx-icon-sm); } .elx-icon-md{ font-size: var(--elx-icon-md); } .elx-icon-lg{ font-size: var(--elx-icon-lg); } .elx-icon-xl{ font-size: var(--elx-icon-xl); } /* ========================================================================== SPINNER ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-spinner{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:inline-block; flex-shrink:0; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ width: var(--elx-spinner-md); height: var(--elx-spinner-md); /* |-------------------------------------------------------------------------- | Appearance |-------------------------------------------------------------------------- */ border: var(--elx-spinner-border) solid var(--elx-spinner-track); border-top-color: var(--elx-spinner-color); border-radius:50%; /* |-------------------------------------------------------------------------- | Effects |-------------------------------------------------------------------------- */ animation: elx-spin .75s linear infinite; } .elx-spinner-sm{ width: var(--elx-spinner-sm); height: var(--elx-spinner-sm); } .elx-spinner-lg{ width: var(--elx-spinner-lg); height: var(--elx-spinner-lg); } @keyframes elx-spin{ to{ transform:rotate(360deg); } } /* ========================================================================== PROGRESS ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-progress{ display:block; overflow:hidden; width:100%; height: var(--elx-progress-height); background: var(--elx-progress-background); border-radius: var(--elx-progress-radius); } .elx-progress-bar{ height:100%; width:0; background: var(--elx-progress-color); border-radius:inherit; transition: width .35s ease; } .elx-progress-indeterminate{ position:relative; } .elx-progress-indeterminate::after{ content:""; position:absolute; inset:0; width:35%; background: var(--elx-progress-color); animation: elx-progress 1s infinite; } @keyframes elx-progress{ from{ transform: translateX(-100%); } to{ transform: translateX(300%); } } /* ========================================================================== EMPTY STATE ========================================================================== */ /* |-------------------------------------------------------------------------- | DEFAULT |-------------------------------------------------------------------------- */ .elx-empty{ /* |-------------------------------------------------------------------------- | Layout |-------------------------------------------------------------------------- */ display:flex; flex-direction:column; align-items:center; text-align:center; /* |-------------------------------------------------------------------------- | Size |-------------------------------------------------------------------------- */ max-width: var(--elx-empty-max-width); /* |-------------------------------------------------------------------------- | Spacing |-------------------------------------------------------------------------- */ gap: var(--elx-space-md); } .elx-empty-icon{ font-size: var(--elx-empty-icon-size); color: var(--elx-text-muted); opacity: .35; } .elx-empty-title{ font-size: var(--elx-font-xl); font-weight: var(--elx-font-semibold); } .elx-empty-description{ color: var(--elx-text-muted); }