@harinis/hui-ui-components/dist/index.esm.css

Custom React UI components with InputStepper and Notification - Built with TypeScript

.input-stepper{align-items:center;background-color:#fff;border:1px solid #d1d5db;border-radius:6px;display:inline-flex;transition:border-color .2s ease}.input-stepper:hover{border-color:#3b82f6}.input-stepper:focus-within{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.input-stepper__button{align-items:center;background:none;border:none;color:#374151;cursor:pointer;display:flex;font-weight:600;justify-content:center;transition:background-color .2s ease}.input-stepper__button:hover:not(:disabled){background-color:#f3f4f6}.input-stepper__button:disabled{cursor:not-allowed;opacity:.5}.input-stepper__input{background:transparent;border:none;font-weight:500;outline:none;text-align:center}.input-stepper__input::-webkit-inner-spin-button,.input-stepper__input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-stepper__input[type=number]{appearance:textfield;-moz-appearance:textfield}.input-stepper--small{height:28px}.input-stepper--small .input-stepper__button{font-size:14px;height:28px;width:28px}.input-stepper--small .input-stepper__input{font-size:12px;height:28px;width:50px}.input-stepper--medium{height:36px}.input-stepper--medium .input-stepper__button{font-size:16px;height:36px;width:36px}.input-stepper--medium .input-stepper__input{font-size:14px;height:36px;width:60px}.input-stepper--large{height:44px}.input-stepper--large .input-stepper__button{font-size:18px;height:44px;width:44px}.input-stepper--large .input-stepper__input{font-size:16px;height:44px;width:70px}.notification{align-items:flex-start;animation:slideIn .3s ease;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:flex;margin-bottom:16px;max-width:480px;padding:16px;position:relative;transition:all .3s ease}.notification--hidden{animation:slideOut .3s ease forwards}@keyframes slideIn{0%{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes slideOut{0%{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}.notification__content{align-items:flex-start;display:flex;flex:1}.notification__icon{align-items:center;border-radius:50%;display:flex;flex-shrink:0;font-size:12px;font-weight:700;height:20px;justify-content:center;margin-right:12px;width:20px}.notification__text{flex:1}.notification__message{font-size:14px;font-weight:600;line-height:1.4;margin-bottom:4px}.notification__description{font-size:13px;line-height:1.4;opacity:.8}.notification__close{align-items:center;background:none;border:none;cursor:pointer;display:flex;font-size:18px;height:20px;justify-content:center;margin-left:12px;opacity:.6;padding:0;transition:opacity .2s ease;width:20px}.notification__close:hover{opacity:1}.notification--success{background-color:#f0f9ff;border-left:4px solid #10b981;color:#065f46}.notification--success .notification__icon--success{background-color:#10b981;color:#fff}.notification--error{background-color:#fef2f2;border-left:4px solid #ef4444;color:#991b1b}.notification--error .notification__icon--error{background-color:#ef4444;color:#fff}.notification--warning{background-color:#fffbeb;border-left:4px solid #f59e0b;color:#92400e}.notification--warning .notification__icon--warning{background-color:#f59e0b;color:#fff}.notification--info{background-color:#eff6ff;border-left:4px solid #3b82f6;color:#1e40af}.notification--info .notification__icon--info{background-color:#3b82f6;color:#fff}