@achs/webkit
Version:
Conjunto de componentes de UI con el estilo del Sistema de Diseño ACHS (Asociación Chilena de Seguridad), para reutilizar de forma transversal en las aplicaciones web de ACHS. Construido con **React 19**, **TypeScript** y **Vite**, con soporte para las
2 lines (1 loc) • 7.64 kB
CSS
._calendarContainer_3zwzi_1{position:relative}._calendar_3zwzi_1{min-width:340px;max-width:350px;margin:5px auto;position:absolute;font-family:ACHS Nueva Sans,sans-serif;top:calc(100% + 5px);transform:translate(-50%);left:50%;overflow:hidden;opacity:0;max-height:0;z-index:9999;transition:box-shadow .2s ease-in-out,max-height .3s ease-in-out,opacity .1s ease-in-out}._calendar_3zwzi_1._active_3zwzi_24{max-height:1000px;opacity:1;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29{display:flex;justify-content:space-between;align-items:center;background-color:rgb(var(--primary-color));padding:.5rem;border-radius:4px 4px 0 0}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerButton_3zwzi_37{background-color:rgb(var(--primary-color));border:none;font-size:var(--font-base);cursor:pointer;color:#fff;transition:all .3s ease;border-radius:12px;padding:.3rem 1.7rem;font-weight:700}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerButton_3zwzi_37:hover,._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerButton_3zwzi_37:focus{filter:brightness(1.1);background-color:rgba(var(--complementary-color),.3)}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerArrowButton_3zwzi_52{background-color:rgb(var(--primary-color));border:none;font-size:var(--font-base);cursor:pointer;color:#fff;transition:all .3s ease;border-radius:50%;padding:.5rem .8rem;font-weight:700}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerArrowButton_3zwzi_52:hover,._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 ._headerArrowButton_3zwzi_52:active{filter:brightness(1.1);background-color:rgba(var(--complementary-color),.3)}._calendar_3zwzi_1 ._calendarHeader_3zwzi_29 span{font-size:var(--font-base);font-weight:700;color:#333}._calendar_3zwzi_1 ._calendarDays_3zwzi_72{display:grid;grid-template-columns:repeat(7,1fr);padding:.5rem;border-radius:0 0 4px 4px;background-color:#fff}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._weekDays_3zwzi_79{display:contents;grid-column:span 7;text-align:center;margin-bottom:10px}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._weekDay_3zwzi_79{padding:5px;font-weight:600;color:#333;font-size:var(--font-md)}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 button{background-color:#fff;border:none;border-radius:4px;padding:.8rem;font-size:var(--font-base);line-height:18px;color:#333;cursor:pointer;transition:background-color .3s ease,color .3s ease}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 button._selected_3zwzi_102{background-color:rgba(var(--primary-color),.9);color:#fff;font-weight:700}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 button:hover:not(._selected_3zwzi_102):not(:disabled):not(._rangeEnd_3zwzi_107):not(._rangeStart_3zwzi_107):not(._rangeMiddle_3zwzi_107){background-color:rgba(var(--primary-color),.5);color:#fff}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 button:disabled{color:#ccc;cursor:not-allowed}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 button._emptyDay_3zwzi_115{background-color:transparent;color:transparent;pointer-events:none;cursor:default}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._rangeStart_3zwzi_107,._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._rangeEnd_3zwzi_107{background-color:rgba(var(--primary-color),.9);color:#fff}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._rangeMiddle_3zwzi_107{background-color:rgba(var(--complementary-color),.3);border-radius:0}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._selected_3zwzi_102{background-color:rgba(var(--primary-color),.9);color:#fff}._calendar_3zwzi_1 ._calendarDays_3zwzi_72 ._rangeHoverEnd_3zwzi_137{background-color:rgba(var(--primary-color),.9);color:#fff;border-radius:4px}._calendar_3zwzi_1 ._headerMonthYear_3zwzi_142{display:flex;gap:.2rem}._calendar_3zwzi_1 ._calendarInputWrapper_3zwzi_146{display:flex;align-items:center;margin-top:10px}._calendar_3zwzi_1 ._calendarInputWrapper_3zwzi_146 ._calendarInput_3zwzi_146{border:1px solid #ddd;border-radius:4px;padding:.5rem;font-size:var(--font-base);width:100%;box-sizing:border-box;cursor:pointer}._calendar_3zwzi_1 ._calendarInputWrapper_3zwzi_146 ._calendarInput_3zwzi_146:focus{outline:none;border-color:rgb(var(--primary-color))}._calendar_3zwzi_1 ._calendarInputWrapper_3zwzi_146 ._calendarInput_3zwzi_146._active_3zwzi_24{border-color:rgb(var(--primary-color))}._calendar_3zwzi_1 ._yearSelector_3zwzi_167,._calendar_3zwzi_1 ._monthSelector_3zwzi_168{position:absolute;left:0;top:52px;background-color:#fff;border:1px solid #ddd;border-radius:4px;overflow-y:auto;height:calc(100% - 101px);box-shadow:0 4px 6px #0000001a;display:grid;gap:.5rem;transform:translateY(-1px);opacity:0;visibility:hidden;transition:transform .2s ease-out,opacity .3s ease,visibility .3s ease}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._show_3zwzi_185,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._show_3zwzi_185{transform:translateY(0);visibility:visible;opacity:1}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._hide_3zwzi_191,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._hide_3zwzi_191{visibility:hidden;opacity:0}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167{grid-template-columns:repeat(5,1fr);padding:1.5rem 1rem;width:calc(100% - 2.05rem)}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:first-child,._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:last-child,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:first-child,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:last-child{background-color:#f0f0f0;cursor:pointer;padding:.1rem .4rem}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:first-child:hover:not(:disabled),._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:last-child:hover:not(:disabled),._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:first-child:hover:not(:disabled),._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:last-child:hover:not(:disabled){background-color:rgba(var(--primary-color),.8);color:#fff}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button._disabled_3zwzi_215,._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:disabled,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button._disabled_3zwzi_215,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:disabled{color:#ccc;cursor:not-allowed}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button._disabled_3zwzi_215:hover,._calendar_3zwzi_1 ._yearSelector_3zwzi_167._yearSelector_3zwzi_167 button:disabled:hover,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button._disabled_3zwzi_215:hover,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._yearSelector_3zwzi_167 button:disabled:hover{background-color:transparent;color:#ccc}._calendar_3zwzi_1 ._yearSelector_3zwzi_167._monthSelector_3zwzi_168,._calendar_3zwzi_1 ._monthSelector_3zwzi_168._monthSelector_3zwzi_168{grid-template-columns:repeat(3,1fr);padding:1.5rem .5rem;width:calc(100% - 1.05rem)}._calendar_3zwzi_1 ._yearSelector_3zwzi_167 button,._calendar_3zwzi_1 ._monthSelector_3zwzi_168 button{background-color:#fff;border:none;border-radius:4px;padding:.85rem .4rem;font-size:var(--font-base);color:#333;cursor:pointer;transition:color .3s ease,background-color .3s ease}._calendar_3zwzi_1 ._yearSelector_3zwzi_167 button:hover,._calendar_3zwzi_1 ._monthSelector_3zwzi_168 button:hover{background-color:#f0f0f0}