@unifiedsoftware/styles 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (24) hide show
  1. package/css/styles.css +697 -121
  2. package/css/styles.min.css +1 -1
  3. package/css/theme-default.css +246 -52
  4. package/css/theme-default.min.css +1 -1
  5. package/index.scss +2 -0
  6. package/package.json +1 -1
  7. package/scss/_utilities.scss +103 -0
  8. package/scss/components/_badge.scss +45 -0
  9. package/scss/components/_button.scss +22 -3
  10. package/scss/components/_chip.scss +21 -0
  11. package/scss/components/_index.scss +3 -0
  12. package/scss/components/_menu.scss +3 -10
  13. package/scss/components/_tabs.scss +34 -6
  14. package/scss/mixins/_button.scss +16 -0
  15. package/scss/mixins/_chip.scss +16 -0
  16. package/scss/mixins/_outline.scss +11 -0
  17. package/scss/mixins/_overlay.scss +38 -39
  18. package/scss/themes/default/_tokens.scss +3 -0
  19. package/scss/themes/default/components/_badge.scss +21 -0
  20. package/scss/themes/default/components/_button.scss +72 -50
  21. package/scss/themes/default/components/_chip.scss +165 -0
  22. package/scss/themes/default/components/_index.scss +3 -0
  23. package/scss/themes/default/components/_menu.scss +11 -6
  24. package/scss/themes/default/components/_tabs.scss +5 -6
package/css/styles.min.css CHANGED
@@ -1 +1 @@
1
- .us-collapse{overflow:hidden;transition:all .15s ease-in-out}.us-icon{width:1em;height:1em;font-size:var(--us-icon-font-size);color:var(--us-icon-color);display:flex;justify-content:center;align-items:center}.us-button{position:relative;height:var(--us-button-height);padding:var(--us-button-padding-y) var(--us-button-padding-x);font-size:var(--us-button-font-size);font-weight:var(--us-button-font-weight);border:none;outline:none;border-radius:var(--us-button-border-radius);cursor:pointer;color:var(--us-button-color);background-color:var(--us-button-background);display:flex;align-items:center;gap:var(--us-button-gap);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.us-button .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-button .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-button .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-button .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-button:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-button:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-button__outline{position:absolute;inset:0px;z-index:0;border:var(--us-button-outline-border-width) solid var(--us-button-outline-border-color);border-radius:inherit;pointer-events:none}.us-button__prefix,.us-button__suffix,.us-button__content{position:relative;display:flex;align-items:center}.us-menu{margin:0;padding:0;color:var(--us-menu-color);background-color:var(--us-menu-background)}.us-menu-item{position:relative;height:var(--us-menu-item-height);padding:var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);font-size:var(--us-menu-item-font-size);font-weight:var(--us-menu-item-font-weight);text-decoration:none;cursor:pointer;display:flex;align-items:center;color:var(--us-menu-item-color);background-color:var(--us-menu-item-background);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);gap:var(--us-menu-item-gap);position:relative}.us-menu-item:hover{text-decoration:none}.us-menu-item .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-menu-item .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-menu-item .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-item .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-menu-item:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-menu-item:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-menu-item--disabled{opacity:.6;pointer-events:none}.us-menu-item--selected .us-menu-item__icon{--us-menu-item-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-item__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-item__icon .us-icon{--us-icon-font-size: var(--us-menu-item-icon-font-size);--us-icon-color: var(--us-menu-item-icon-color)}.us-menu-item__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-item__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-group{position:relative;height:var(--us-menu-group-height);padding:var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);font-size:var(--us-menu-group-font-size);font-weight:var(--us-menu-group-font-weight);text-decoration:none;border-bottom:var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);display:flex;align-items:center;color:var(--us-menu-group-color);background-color:var(--us-menu-group-background);gap:var(--us-menu-group-gap);position:relative}.us-menu-group:hover{text-decoration:none}.us-menu-group .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-menu-group .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-menu-group .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-group .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-menu-group:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-menu-group:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-menu-group__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-group--selected .us-menu-group__icon{--us-menu-group-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-group__icon .us-icon{--us-icon-font-size: var(--us-menu-group-icon-font-size);--us-icon-color: var(--us-menu-group-icon-color)}.us-menu-group__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-group__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-submenu .us-menu{--us-menu-background: var(--us-submenu-background)}.us-divider{width:100%;height:1px;background:#cac4d0}.us-tabs{width:100%;display:flex;align-items:center}.us-tab{position:relative;padding:0px 16px;font-size:var(--us-tab-font-size);font-weight:var(--us-tab-font-weight);vertical-align:middle;z-index:1;color:var(--us-tab-color);display:inline-flex;justify-content:center;align-items:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);position:relative}.us-tab .us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:inherit}.us-tab .us-overlay__surface{position:absolute;inset:0px;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;z-index:0}.us-tab .us-overlay::before{content:"";position:absolute;inset:0px;opacity:0;background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-tab .us-overlay::after{content:"";position:absolute;inset:0px;opacity:0;color:var(--us-_active-overlay-color);background-color:currentColor;transition:opacity 30ms linear}.us-tab:hover .us-overlay::before{color:var(--us-_hover-overlay-color);opacity:var(--us-_hover-overlay-opacity)}.us-tab:active .us-overlay::after{opacity:var(--us-_active-overlay-opacity)}.us-tab__content{position:relative;height:48px;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:8px}.us-tab__indicator{position:absolute;height:var(--us-tab-indicator-height);border-radius:0;inset:auto 0px 0px;opacity:0;z-index:-1;background:var(--us-tab-indicator-color);transform-origin:left bottom}.us-tab--selected .us-tab__indicator{opacity:1}.us-animation-spin{animation:us-animation-spin 1s linear infinite;transform-origin:center center}@keyframes us-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-animation-pulse{animation:us-animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes us-animation-pulse{0%,100%{opacity:1}50%{opacity:.5}}.us-animation-bounce{animation:us-animation-bounce 1s infinite}@keyframes us-animation-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}.slider-container{width:300px;height:20px;background-color:#ccc;position:relative;margin-top:20px}.slider-point{width:20px;height:20px;background-color:#007bff;border-radius:50%;position:absolute;cursor:pointer}
1
+ .us-badge{position:absolute;padding:var(--us-badge-padding-y) var(--us-badge-padding-x);font-size:var(--us-badge-font-size);font-weight:var(--us-badge-font-weight);border:var(--us-badge-border-width) solid var(--us-badge-border-color);border-radius:var(--us-badge-border-radius);color:var(--us-badge-color);background-color:var(--us-badge-background);display:inline-flex}.us-badge>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-badge:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-badge:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-badge--top-left{top:10%;left:10%}.us-badge--top-right{right:0;top:0;transform:translate(50%, -50%)}.us-badge--bottom-left{bottom:10%;left:10%}.us-badge--bottom-right{bottom:0;right:0}.us-badge-wrapper{flex-shrink:0;position:relative;display:inline-flex}.us-collapse{overflow:hidden;transition:all .15s ease-in-out}.us-icon{width:1em;height:1em;font-size:var(--us-icon-font-size);color:var(--us-icon-color);display:flex;justify-content:center;align-items:center}.us-chip{position:relative;height:var(--us-chip-height);padding:var(--us-chip-padding-y) var(--us-chip-padding-x);font-size:var(--us-chip-font-size);font-weight:var(--us-chip-font-weight);font-family:var(--us-chip-font-family);border-radius:var(--us-chip-border-radius);color:var(--us-chip-color);background-color:var(--us-chip-background);display:inline-flex;align-items:center;gap:var(--us-chip-gap)}.us-chip>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-chip:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-chip:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-chip>.us-outline{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;border:var(--us-outline-border-width) solid var(--us-outline-border-color)}.us-button{position:relative;height:var(--us-button-height);padding:var(--us-button-padding-y) var(--us-button-padding-x);font-size:var(--us-button-font-size);font-weight:var(--us-button-font-weight);font-family:var(--us-button-font-family);border:none;outline:none;border-radius:var(--us-button-border-radius);cursor:pointer;color:var(--us-button-color);background-color:var(--us-button-background);display:inline-flex;align-items:center;gap:var(--us-button-gap);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.us-button:hover{text-decoration:none}.us-button>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-button:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-button:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-button>.us-outline{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;border:var(--us-outline-border-width) solid var(--us-outline-border-color)}.us-button--disabled{opacity:.6;pointer-events:none}.us-button--icon-only{width:var(--us-button-height);padding:0;border-radius:9999px;justify-content:center}.us-button__outline{position:absolute;inset:0px;z-index:0;border:var(--us-button-outline-border-width) solid var(--us-button-outline-border-color);border-radius:inherit;pointer-events:none}.us-button__start-icon,.us-button__end-icon,.us-button__content{position:relative;display:flex;align-items:center}.us-menu{margin:0;padding:var(--us-menu-padding-y) var(--us-menu-padding-x);color:var(--us-menu-color);background-color:var(--us-menu-background)}.us-menu-item{position:relative;height:var(--us-menu-item-height);padding:var(--us-menu-item-padding-y) var(--us-menu-item-padding-x);font-size:var(--us-menu-item-font-size);font-weight:var(--us-menu-item-font-weight);border-radius:var(--us-menu-item-border-radius);text-decoration:none;cursor:pointer;display:flex;align-items:center;color:var(--us-menu-item-color);background-color:var(--us-menu-item-background);user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);gap:var(--us-menu-item-gap)}.us-menu-item:hover{text-decoration:none}.us-menu-item>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-item:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-menu-item:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-menu-item--disabled{opacity:.6;pointer-events:none}.us-menu-item--selected .us-menu-item__icon{--us-menu-item-icon-color: var(--us-_active-menu-item-icon-color)}.us-menu-item__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-item__icon .us-icon{--us-icon-font-size: var(--us-menu-item-icon-font-size);--us-icon-color: var(--us-menu-item-icon-color)}.us-menu-item__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-item__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-group{position:relative;height:var(--us-menu-group-height);padding:var(--us-menu-group-padding-y) var(--us-menu-group-padding-x);font-size:var(--us-menu-group-font-size);font-weight:var(--us-menu-group-font-weight);text-decoration:none;border-bottom:var(--us-menu-group-border-width) solid var(--us-menu-group-border-color);border-radius:var(--us-menu-group-border-radius);display:flex;align-items:center;color:var(--us-menu-group-color);background-color:var(--us-menu-group-background);gap:var(--us-menu-group-gap)}.us-menu-group:hover{text-decoration:none}.us-menu-group>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-menu-group:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-menu-group:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-menu-group__icon{flex-shrink:0;z-index:1;display:flex;justify-content:center;align-items:center}.us-menu-group__content{flex-grow:1;z-index:1;display:grid;overflow:hidden}.us-menu-group__title{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.us-menu-submenu .us-menu{--us-menu-background: var(--us-submenu-background)}.us-divider{width:100%;height:1px;background:#cac4d0}.us-tabs{width:100%;white-space:nowrap;overflow:hidden;display:flex;align-items:center}.us-tabs--start{justify-content:flex-start}.us-tabs--center{justify-content:center}.us-tabs--end{justify-content:flex-end}.us-tabs--stretch .us-tab{flex-grow:1}@media(max-width: 767px)and (hover: none){.us-tabs{overflow:auto}}.us-tab{position:relative;padding:0px 16px;font-size:var(--us-tab-font-size);font-weight:var(--us-tab-font-weight);text-decoration:none;vertical-align:middle;z-index:1;color:var(--us-tab-color);display:inline-flex;justify-content:center;align-items:center;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.us-tab:hover{text-decoration:none}.us-tab>.us-overlay{position:absolute;inset:0px;border-radius:inherit;overflow:hidden;color:var(--us-overlay-color);opacity:var(--us-overlay-opacity);background-color:currentColor;transition:opacity 15ms linear,background-color 15ms linear}.us-tab:hover>.us-overlay{color:var(--us-_hover-overlay-color, var(--us-overlay-color));opacity:var(--us-_hover-overlay-opacity, var(--us-overlay-opacity));transition:opacity 30ms linear}.us-tab:active>.us-overlay{color:var(--us-_active-overlay-color, var(--us-_hover-overlay-color, var(--us-overlay-color)));opacity:var(--us-_active-overlay-opacity, var(--us-_hover-overlay-opacity, var(--us-overlay-opacity)))}.us-tab--disabled{opacity:.6;pointer-events:none}.us-tab__content{position:relative;height:40px;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;gap:8px}.us-tab__indicator{position:absolute;height:var(--us-tab-indicator-height);border-radius:var(--us-tab-indicator-border-radius);inset:auto 0px 0px;opacity:0;z-index:-1;background:var(--us-tab-indicator-color);transform-origin:left bottom}.us-tab--selected .us-tab__indicator{opacity:1}.us-animation-spin{animation:us-animation-spin 1s linear infinite;transform-origin:center center}@keyframes us-animation-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-animation-pulse{animation:us-animation-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}@keyframes us-animation-pulse{0%,100%{opacity:1}50%{opacity:.5}}.us-animation-bounce{animation:us-animation-bounce 1s infinite}@keyframes us-animation-bounce{0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8, 0, 1, 1)}50%{transform:translateY(0);animation-timing-function:cubic-bezier(0, 0, 0.2, 1)}}.us-gap-0{gap:0}.us-gap-1{gap:.25rem}.us-gap-2{gap:.5rem}.us-gap-3{gap:.75rem}.us-gap-4{gap:1rem}.us-gap-5{gap:1.25rem}.us-gap-6{gap:1.5rem}.us-gap-7{gap:1.75rem}.us-gap-8{gap:2rem}.us-gap-x-0{column-gap:0}.us-gap-x-1{column-gap:.25rem}.us-gap-x-2{column-gap:.5rem}.us-gap-x-3{column-gap:.75rem}.us-gap-x-4{column-gap:1rem}.us-gap-x-5{column-gap:1.25rem}.us-gap-x-6{column-gap:1.5rem}.us-gap-x-7{column-gap:1.75rem}.us-gap-x-8{column-gap:2rem}.us-gap-y-0{row-gap:0}.us-gap-y-1{row-gap:.25rem}.us-gap-y-2{row-gap:.5rem}.us-gap-y-3{row-gap:.75rem}.us-gap-y-4{row-gap:1rem}.us-gap-y-5{row-gap:1.25rem}.us-gap-y-6{row-gap:1.5rem}.us-gap-y-7{row-gap:1.75rem}.us-gap-y-8{row-gap:2rem}@media screen and (min-width: 0px){.xs\:us-gap-0{gap:0}.xs\:us-gap-1{gap:.25rem}.xs\:us-gap-2{gap:.5rem}.xs\:us-gap-3{gap:.75rem}.xs\:us-gap-4{gap:1rem}.xs\:us-gap-5{gap:1.25rem}.xs\:us-gap-6{gap:1.5rem}.xs\:us-gap-7{gap:1.75rem}.xs\:us-gap-8{gap:2rem}.xs\:us-gap-x-0{column-gap:0}.xs\:us-gap-x-1{column-gap:.25rem}.xs\:us-gap-x-2{column-gap:.5rem}.xs\:us-gap-x-3{column-gap:.75rem}.xs\:us-gap-x-4{column-gap:1rem}.xs\:us-gap-x-5{column-gap:1.25rem}.xs\:us-gap-x-6{column-gap:1.5rem}.xs\:us-gap-x-7{column-gap:1.75rem}.xs\:us-gap-x-8{column-gap:2rem}.xs\:us-gap-y-0{row-gap:0}.xs\:us-gap-y-1{row-gap:.25rem}.xs\:us-gap-y-2{row-gap:.5rem}.xs\:us-gap-y-3{row-gap:.75rem}.xs\:us-gap-y-4{row-gap:1rem}.xs\:us-gap-y-5{row-gap:1.25rem}.xs\:us-gap-y-6{row-gap:1.5rem}.xs\:us-gap-y-7{row-gap:1.75rem}.xs\:us-gap-y-8{row-gap:2rem}}@media screen and (min-width: 600px){.sm\:us-gap-0{gap:0}.sm\:us-gap-1{gap:.25rem}.sm\:us-gap-2{gap:.5rem}.sm\:us-gap-3{gap:.75rem}.sm\:us-gap-4{gap:1rem}.sm\:us-gap-5{gap:1.25rem}.sm\:us-gap-6{gap:1.5rem}.sm\:us-gap-7{gap:1.75rem}.sm\:us-gap-8{gap:2rem}.sm\:us-gap-x-0{column-gap:0}.sm\:us-gap-x-1{column-gap:.25rem}.sm\:us-gap-x-2{column-gap:.5rem}.sm\:us-gap-x-3{column-gap:.75rem}.sm\:us-gap-x-4{column-gap:1rem}.sm\:us-gap-x-5{column-gap:1.25rem}.sm\:us-gap-x-6{column-gap:1.5rem}.sm\:us-gap-x-7{column-gap:1.75rem}.sm\:us-gap-x-8{column-gap:2rem}.sm\:us-gap-y-0{row-gap:0}.sm\:us-gap-y-1{row-gap:.25rem}.sm\:us-gap-y-2{row-gap:.5rem}.sm\:us-gap-y-3{row-gap:.75rem}.sm\:us-gap-y-4{row-gap:1rem}.sm\:us-gap-y-5{row-gap:1.25rem}.sm\:us-gap-y-6{row-gap:1.5rem}.sm\:us-gap-y-7{row-gap:1.75rem}.sm\:us-gap-y-8{row-gap:2rem}}@media screen and (min-width: 960px){.md\:us-gap-0{gap:0}.md\:us-gap-1{gap:.25rem}.md\:us-gap-2{gap:.5rem}.md\:us-gap-3{gap:.75rem}.md\:us-gap-4{gap:1rem}.md\:us-gap-5{gap:1.25rem}.md\:us-gap-6{gap:1.5rem}.md\:us-gap-7{gap:1.75rem}.md\:us-gap-8{gap:2rem}.md\:us-gap-x-0{column-gap:0}.md\:us-gap-x-1{column-gap:.25rem}.md\:us-gap-x-2{column-gap:.5rem}.md\:us-gap-x-3{column-gap:.75rem}.md\:us-gap-x-4{column-gap:1rem}.md\:us-gap-x-5{column-gap:1.25rem}.md\:us-gap-x-6{column-gap:1.5rem}.md\:us-gap-x-7{column-gap:1.75rem}.md\:us-gap-x-8{column-gap:2rem}.md\:us-gap-y-0{row-gap:0}.md\:us-gap-y-1{row-gap:.25rem}.md\:us-gap-y-2{row-gap:.5rem}.md\:us-gap-y-3{row-gap:.75rem}.md\:us-gap-y-4{row-gap:1rem}.md\:us-gap-y-5{row-gap:1.25rem}.md\:us-gap-y-6{row-gap:1.5rem}.md\:us-gap-y-7{row-gap:1.75rem}.md\:us-gap-y-8{row-gap:2rem}}@media screen and (min-width: 1264px){.lg\:us-gap-0{gap:0}.lg\:us-gap-1{gap:.25rem}.lg\:us-gap-2{gap:.5rem}.lg\:us-gap-3{gap:.75rem}.lg\:us-gap-4{gap:1rem}.lg\:us-gap-5{gap:1.25rem}.lg\:us-gap-6{gap:1.5rem}.lg\:us-gap-7{gap:1.75rem}.lg\:us-gap-8{gap:2rem}.lg\:us-gap-x-0{column-gap:0}.lg\:us-gap-x-1{column-gap:.25rem}.lg\:us-gap-x-2{column-gap:.5rem}.lg\:us-gap-x-3{column-gap:.75rem}.lg\:us-gap-x-4{column-gap:1rem}.lg\:us-gap-x-5{column-gap:1.25rem}.lg\:us-gap-x-6{column-gap:1.5rem}.lg\:us-gap-x-7{column-gap:1.75rem}.lg\:us-gap-x-8{column-gap:2rem}.lg\:us-gap-y-0{row-gap:0}.lg\:us-gap-y-1{row-gap:.25rem}.lg\:us-gap-y-2{row-gap:.5rem}.lg\:us-gap-y-3{row-gap:.75rem}.lg\:us-gap-y-4{row-gap:1rem}.lg\:us-gap-y-5{row-gap:1.25rem}.lg\:us-gap-y-6{row-gap:1.5rem}.lg\:us-gap-y-7{row-gap:1.75rem}.lg\:us-gap-y-8{row-gap:2rem}}@media screen and (min-width: 1904px){.xl\:us-gap-0{gap:0}.xl\:us-gap-1{gap:.25rem}.xl\:us-gap-2{gap:.5rem}.xl\:us-gap-3{gap:.75rem}.xl\:us-gap-4{gap:1rem}.xl\:us-gap-5{gap:1.25rem}.xl\:us-gap-6{gap:1.5rem}.xl\:us-gap-7{gap:1.75rem}.xl\:us-gap-8{gap:2rem}.xl\:us-gap-x-0{column-gap:0}.xl\:us-gap-x-1{column-gap:.25rem}.xl\:us-gap-x-2{column-gap:.5rem}.xl\:us-gap-x-3{column-gap:.75rem}.xl\:us-gap-x-4{column-gap:1rem}.xl\:us-gap-x-5{column-gap:1.25rem}.xl\:us-gap-x-6{column-gap:1.5rem}.xl\:us-gap-x-7{column-gap:1.75rem}.xl\:us-gap-x-8{column-gap:2rem}.xl\:us-gap-y-0{row-gap:0}.xl\:us-gap-y-1{row-gap:.25rem}.xl\:us-gap-y-2{row-gap:.5rem}.xl\:us-gap-y-3{row-gap:.75rem}.xl\:us-gap-y-4{row-gap:1rem}.xl\:us-gap-y-5{row-gap:1.25rem}.xl\:us-gap-y-6{row-gap:1.5rem}.xl\:us-gap-y-7{row-gap:1.75rem}.xl\:us-gap-y-8{row-gap:2rem}}.slider-container{width:300px;height:20px;background-color:#ccc;position:relative;margin-top:20px}.slider-point{width:20px;height:20px;background-color:#007bff;border-radius:50%;position:absolute;cursor:pointer}
package/css/theme-default.css CHANGED
@@ -3,20 +3,244 @@
3
3
  --us-icon-color: inherit;
4
4
  }
5
5
 
6
- .us-button {
7
- --us-button-font-weight: 500;
8
- --us-button-border-radius: 4px;
6
+ .us-badge {
7
+ --us-badge-padding-y: 0.125rem;
8
+ --us-badge-padding-x: 0.325rem;
9
+ --us-badge-font-size: 0.75rem;
10
+ --us-badge-font-weight: 700;
11
+ --us-badge-border-radius: 9999px;
12
+ --us-badge-border-width: 2px;
13
+ --us-badge-border-color: var(--us-white-color);
14
+ --us-badge-color: var(--us-white-color);
15
+ --us-badge-background: var(--us-primary-color);
9
16
  /* Overlay */
17
+ --us-overlay-color: inherit;
18
+ --us-overlay-opacity: 0.08;
10
19
  --us-_hover-overlay-color: inherit;
11
20
  --us-_hover-overlay-opacity: 0.08;
12
21
  --us-_active-overlay-color: inherit;
13
22
  --us-_active-overlay-opacity: 0.12;
14
23
  }
24
+
25
+ .us-chip {
26
+ --us-chip-padding-y: 0.125rem;
27
+ --us-chip-padding-x: 0.5rem;
28
+ --us-chip-font-size: 0.75rem;
29
+ --us-chip-font-weight: 700;
30
+ --us-chip-border-radius: 9999px;
31
+ --us-chip-color: var(--us-primary-color);
32
+ --us-chip-background: transparent;
33
+ /* Overlay */
34
+ --us-overlay-color: inherit;
35
+ --us-overlay-opacity: 0;
36
+ /* Outline */
37
+ --us-outline-border-width: 1px;
38
+ --us-outline-border-color: transparent;
39
+ }
40
+ .us-chip > .us-overlay {
41
+ --us-overlay-color: inherit;
42
+ --us-overlay-opacity: 0;
43
+ --us-_hover-overlay-color: initial;
44
+ --us-_hover-overlay-opacity: initial;
45
+ --us-_active-overlay-color: initial;
46
+ --us-_active-overlay-opacity: initial;
47
+ }
48
+ .us-chip--xs {
49
+ --us-chip-height: 28px;
50
+ --us-chip-padding-y: 0;
51
+ --us-chip-padding-x: 0.5rem;
52
+ --us-chip-font-size: 0.75rem;
53
+ --us-chip-border-radius: 9999px;
54
+ --us-chip-gap: 0.375rem;
55
+ }
56
+ .us-chip--xs .us-icon {
57
+ --us-icon-font-size: 0.75rem;
58
+ }
59
+ .us-chip--sm {
60
+ --us-chip-height: 32px;
61
+ --us-chip-padding-y: 0;
62
+ --us-chip-padding-x: 0.75rem;
63
+ --us-chip-font-size: 14px;
64
+ --us-chip-border-radius: 9999px;
65
+ --us-chip-gap: 0.375rem;
66
+ }
67
+ .us-chip--sm .us-icon {
68
+ --us-icon-font-size: 0.875rem;
69
+ }
70
+ .us-chip--md {
71
+ --us-chip-height: 40px;
72
+ --us-chip-padding-y: 0;
73
+ --us-chip-padding-x: 1rem;
74
+ --us-chip-font-size: 14px;
75
+ --us-chip-border-radius: 9999px;
76
+ --us-chip-gap: 0.5rem;
77
+ }
78
+ .us-chip--md .us-icon {
79
+ --us-icon-font-size: 1rem;
80
+ }
81
+ .us-chip--lg {
82
+ --us-chip-height: 48px;
83
+ --us-chip-padding-y: 0;
84
+ --us-chip-padding-x: 1.5rem;
85
+ --us-chip-font-size: 1rem;
86
+ --us-chip-border-radius: 9999px;
87
+ --us-chip-gap: 0.5rem;
88
+ }
89
+ .us-chip--lg .us-icon {
90
+ --us-icon-font-size: 1.125rem;
91
+ }
92
+ .us-chip--xl {
93
+ --us-chip-height: 48px;
94
+ --us-chip-padding-y: 0;
95
+ --us-chip-padding-x: 1.5rem;
96
+ --us-chip-font-size: 1rem;
97
+ --us-chip-border-radius: 9999px;
98
+ --us-chip-gap: 0.5rem;
99
+ }
100
+ .us-chip--xl .us-icon {
101
+ --us-icon-font-size: 1.25rem;
102
+ }
103
+ .us-chip--filled {
104
+ --us-chip-border-width: 1px;
105
+ --us-chip-border-color: transparent;
106
+ --us-chip-color: var(--us-white-color);
107
+ }
108
+ .us-chip--filled.us-chip--primary {
109
+ --us-chip-background: var(--us-primary-color);
110
+ }
111
+ .us-chip--filled.us-chip--secondary {
112
+ --us-chip-color: var(--us-black-color);
113
+ --us-chip-background: var(--us-secondary-color);
114
+ }
115
+ .us-chip--filled.us-chip--success {
116
+ --us-chip-background: var(--us-success-color);
117
+ }
118
+ .us-chip--filled.us-chip--info {
119
+ --us-chip-background: var(--us-info-color);
120
+ }
121
+ .us-chip--filled.us-chip--warning {
122
+ --us-chip-background: var(--us-warning-color);
123
+ }
124
+ .us-chip--filled.us-chip--danger {
125
+ --us-chip-background: var(--us-danger-color);
126
+ }
127
+ .us-chip--outlined {
128
+ /* Outline */
129
+ --us-outline-border-color: currentColor;
130
+ }
131
+ .us-chip--outlined.us-chip--primary {
132
+ --us-chip-color: var(--us-primary-color);
133
+ }
134
+ .us-chip--outlined.us-chip--secondary {
135
+ --us-chip-color: var(--us-black-color);
136
+ }
137
+ .us-chip--outlined.us-chip--success {
138
+ --us-chip-color: var(--us-success-color);
139
+ }
140
+ .us-chip--outlined.us-chip--info {
141
+ --us-chip-color: var(--us-info-color);
142
+ }
143
+ .us-chip--outlined.us-chip--warning {
144
+ --us-chip-color: var(--us-warning-color);
145
+ }
146
+ .us-chip--outlined.us-chip--danger {
147
+ --us-chip-color: var(--us-danger-color);
148
+ }
149
+ .us-chip--text.us-chip--primary {
150
+ --us-chip-color: var(--us-primary-color);
151
+ }
152
+ .us-chip--text.us-chip--secondary {
153
+ --us-chip-color: var(--us-black-color);
154
+ }
155
+ .us-chip--text.us-chip--success {
156
+ --us-button-color: var(--us-success-color);
157
+ }
158
+ .us-chip--text.us-chip--info {
159
+ --us-chip-color: var(--us-info-color);
160
+ }
161
+ .us-chip--text.us-chip--warning {
162
+ --us-chip-color: var(--us-warning-color);
163
+ }
164
+ .us-chip--text.us-chip--danger {
165
+ --us-chip-color: var(--us-danger-color);
166
+ }
167
+
168
+ .us-button {
169
+ --us-button-font-weight: 500;
170
+ --us-button-font-family: var(--us-font-sans);
171
+ /* Overlay */
172
+ --us-overlay-color: inherit;
173
+ --us-overlay-opacity: 0;
174
+ --us-_hover-overlay-opacity: 0;
175
+ --us-_hover-overlay-opacity: 0.08;
176
+ --us-_active-overlay-opacity: 0.12;
177
+ /* Outline */
178
+ --us-outline-border-width: 1px;
179
+ --us-outline-border-color: transparent;
180
+ }
181
+ .us-button--xs {
182
+ --us-button-height: 20px;
183
+ --us-button-padding-y: 0;
184
+ --us-button-padding-x: 0.5rem;
185
+ --us-button-font-size: 0.625rem;
186
+ --us-button-border-radius: 4px;
187
+ --us-button-gap: 0.25rem;
188
+ }
189
+ .us-button--xs .us-icon {
190
+ --us-icon-font-size: 0.75rem;
191
+ }
192
+ .us-button--sm {
193
+ --us-button-height: 28px;
194
+ --us-button-padding-y: 0;
195
+ --us-button-padding-x: 0.75rem;
196
+ --us-button-font-size: 0.75rem;
197
+ --us-button-border-radius: 4px;
198
+ --us-button-gap: 0.375rem;
199
+ }
200
+ .us-button--sm .us-icon {
201
+ --us-icon-font-size: 1rem;
202
+ }
203
+ .us-button--md {
204
+ --us-button-height: 36px;
205
+ --us-button-padding-y: 0;
206
+ --us-button-padding-x: 1rem;
207
+ --us-button-font-size: 0.875rem;
208
+ --us-button-border-radius: 4px;
209
+ --us-button-gap: 0.5rem;
210
+ }
211
+ .us-button--md .us-icon {
212
+ --us-icon-font-size: 1.125rem;
213
+ }
214
+ .us-button--lg {
215
+ --us-button-height: 44px;
216
+ --us-button-padding-y: 0;
217
+ --us-button-padding-x: 1.25rem;
218
+ --us-button-font-size: 1rem;
219
+ --us-button-border-radius: 4px;
220
+ --us-button-gap: 0.625rem;
221
+ }
222
+ .us-button--lg .us-icon {
223
+ --us-icon-font-size: 1.25rem;
224
+ }
225
+ .us-button--xl {
226
+ --us-button-height: 52px;
227
+ --us-button-padding-y: 0;
228
+ --us-button-padding-x: 1.5rem;
229
+ --us-button-font-size: 1rem;
230
+ --us-button-border-radius: 4px;
231
+ --us-button-gap: 0.75rem;
232
+ }
233
+ .us-button--xl .us-icon {
234
+ --us-icon-font-size: 1.5rem;
235
+ }
15
236
  .us-button--filled {
16
237
  --us-button-border-width: 1px;
17
238
  --us-button-border-color: transparent;
18
239
  --us-button-color: var(--us-white-color);
19
240
  }
241
+ .us-button--filled .us-chip {
242
+ --us-chip-background: var(--us-white-color);
243
+ }
20
244
  .us-button--filled.us-button--primary {
21
245
  --us-button-background: var(--us-primary-color);
22
246
  }
@@ -37,13 +261,8 @@
37
261
  --us-button-background: var(--us-danger-color);
38
262
  }
39
263
  .us-button--outlined {
40
- --us-button-border-width: 1px;
41
- --us-button-border-color: currentColor;
42
- --us-button-elevation-opacity: 0;
43
- --us-_hover-button-elevation-opacity: 0.08;
44
- --us-_active-button-elevation-opacity: 0.12;
45
- --us-button-outline-border-width: 1px;
46
- --us-button-outline-border-color: currentColor;
264
+ /* Outline */
265
+ --us-outline-border-color: currentColor;
47
266
  }
48
267
  .us-button--outlined.us-button--primary {
49
268
  --us-button-color: var(--us-primary-color);
@@ -63,13 +282,6 @@
63
282
  .us-button--outlined.us-button--danger {
64
283
  --us-button-color: var(--us-danger-color);
65
284
  }
66
- .us-button--text {
67
- --us-button-border-width: 1px;
68
- --us-button-border-color: transparent;
69
- --us-button-elevation-opacity: 0;
70
- --us-_hover-button-elevation-opacity: 0.08;
71
- --us-_active-button-elevation-opacity: 0.12;
72
- }
73
285
  .us-button--text.us-button--primary {
74
286
  --us-button-color: var(--us-primary-color);
75
287
  }
@@ -88,32 +300,10 @@
88
300
  .us-button--text.us-button--danger {
89
301
  --us-button-color: var(--us-danger-color);
90
302
  }
91
- .us-button--sm {
92
- --us-button-height: 32px;
93
- --us-button-padding-y: 0;
94
- --us-button-padding-x: 0.75rem;
95
- --us-button-font-size: 14px;
96
- --us-button-gap: 0.375rem;
97
- --us-icon-font-size: 1.125rem;
98
- }
99
- .us-button--md {
100
- --us-button-height: 36px;
101
- --us-button-padding-y: 0;
102
- --us-button-padding-x: 1rem;
103
- --us-button-font-size: 14px;
104
- --us-button-gap: 0.5rem;
105
- --us-icon-font-size: 1.25rem;
106
- }
107
- .us-button--lg {
108
- --us-button-height: 40px;
109
- --us-button-padding-y: 0;
110
- --us-button-padding-x: 1.25rem;
111
- --us-button-font-size: 1rem;
112
- --us-button-gap: 0.5rem;
113
- --us-icon-font-size: 1.5rem;
114
- }
115
303
 
116
304
  .us-menu {
305
+ --us-menu-padding-y: 0;
306
+ --us-menu-padding-x: 0;
117
307
  --us-menu-color: #343a40;
118
308
  --us-menu-background: #fff;
119
309
  }
@@ -124,22 +314,24 @@
124
314
  --us-menu-item-padding-level: 2rem;
125
315
  --us-menu-item-font-size: 12px;
126
316
  --us-menu-item-font-weight: 500;
317
+ --us-menu-item-border-radius: 0;
127
318
  --us-menu-item-gap: 1rem;
128
- --us-menu-item-icon-font-size: 16px;
129
- --us-menu-item-icon-color: var(--us-primary-color);
130
319
  /* Overlay */
131
320
  --us-overlay-color: inherit;
132
321
  --us-overlay-opacity: 0;
133
322
  --us-_hover-overlay-color: inherit;
134
323
  --us-_hover-overlay-opacity: 0.08;
135
- --us-_active-overlay-opacity: 0;
324
+ }
325
+ .us-menu-item__icon .us-icon {
326
+ --us-icon-font-size: 16px;
327
+ --us-icon-color: var(--us-primary-color);
136
328
  }
137
329
  .us-menu-item--selected {
138
330
  --us-menu-item-color: var(--us-primary-color);
139
331
  --us-overlay-color: var(--us-primary-color);
140
332
  --us-overlay-opacity: 0.08;
141
- --us-_hover-overlay-opacity: 0;
142
- --us-_active-overlay-opacity: 0;
333
+ --us-_hover-overlay-opacity: 0.08;
334
+ --us-_active-overlay-opacity: 0.08;
143
335
  }
144
336
  .us-menu-group {
145
337
  --us-menu-group-height: 40px;
@@ -148,6 +340,7 @@
148
340
  --us-menu-group-padding-level: 2rem;
149
341
  --us-menu-group-font-size: 12px;
150
342
  --us-menu-group-font-weight: 700;
343
+ --us-menu-group-border-radius: 0;
151
344
  --us-menu-group-gap: 1rem;
152
345
  --us-menu-group-border-width: 1px;
153
346
  --us-menu-group-border-color: #dee2e6;
@@ -164,20 +357,19 @@
164
357
 
165
358
  .us-tab {
166
359
  --us-tab-color: var(--us-black-color);
167
- --us-tab-font-size: 12px;
360
+ --us-tab-font-size: 0.8125rem;
168
361
  --us-tab-font-weight: 500;
169
362
  --us-tab-indicator-color: var(--us-primary-color);
170
- --us-tab-indicator-height: 2px;
363
+ --us-tab-indicator-height: 3px;
364
+ --us-tab-indicator-border-radius: 3px 3px 0px 0px;
171
365
  /* Overlay */
172
- --us-_hover-overlay-color: inherit;
366
+ --us-overlay-opacity: 0;
367
+ --us-overlay-color: inherit;
173
368
  --us-_hover-overlay-opacity: 0.08;
174
- --us-_active-overlay-color: inherit;
175
369
  --us-_active-overlay-opacity: 0.12;
176
370
  }
177
371
  .us-tab--selected {
178
372
  --us-tab-color: var(--us-primary-color);
179
- --us-_hover-overlay-color: inherit;
180
- --us-_active-overlay-color: inherit;
181
373
  }
182
374
 
183
375
  :root {
@@ -189,4 +381,6 @@
189
381
  --us-danger-color: #ff0017;
190
382
  --us-black-color: #000;
191
383
  --us-white-color: #fff;
384
+ --us-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
385
+ Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
192
386
  }
package/css/theme-default.min.css CHANGED
@@ -1 +1 @@
1
- .us-icon{--us-icon-font-size: 1.5rem;--us-icon-color: inherit}.us-button{--us-button-font-weight: 500;--us-button-border-radius: 4px;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-button--filled{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-color: var(--us-white-color)}.us-button--filled.us-button--primary{--us-button-background: var(--us-primary-color)}.us-button--filled.us-button--secondary{--us-button-color: var(--us-black-color);--us-button-background: var(--us-secondary-color)}.us-button--filled.us-button--success{--us-button-background: var(--us-success-color)}.us-button--filled.us-button--info{--us-button-background: var(--us-info-color)}.us-button--filled.us-button--warning{--us-button-background: var(--us-warning-color)}.us-button--filled.us-button--danger{--us-button-background: var(--us-danger-color)}.us-button--outlined{--us-button-border-width: 1px;--us-button-border-color: currentColor;--us-button-elevation-opacity: 0;--us-_hover-button-elevation-opacity: 0.08;--us-_active-button-elevation-opacity: 0.12;--us-button-outline-border-width: 1px;--us-button-outline-border-color: currentColor}.us-button--outlined.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--outlined.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--outlined.us-button--success{--us-button-color: var(--us-success-color)}.us-button--outlined.us-button--info{--us-button-color: var(--us-info-color)}.us-button--outlined.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--outlined.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--text{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-elevation-opacity: 0;--us-_hover-button-elevation-opacity: 0.08;--us-_active-button-elevation-opacity: 0.12}.us-button--text.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--text.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--text.us-button--success{--us-button-color: var(--us-success-color)}.us-button--text.us-button--info{--us-button-color: var(--us-info-color)}.us-button--text.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--text.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--sm{--us-button-height: 32px;--us-button-padding-y: 0;--us-button-padding-x: 0.75rem;--us-button-font-size: 14px;--us-button-gap: 0.375rem;--us-icon-font-size: 1.125rem}.us-button--md{--us-button-height: 36px;--us-button-padding-y: 0;--us-button-padding-x: 1rem;--us-button-font-size: 14px;--us-button-gap: 0.5rem;--us-icon-font-size: 1.25rem}.us-button--lg{--us-button-height: 40px;--us-button-padding-y: 0;--us-button-padding-x: 1.25rem;--us-button-font-size: 1rem;--us-button-gap: 0.5rem;--us-icon-font-size: 1.5rem}.us-menu{--us-menu-color: #343a40;--us-menu-background: #fff}.us-menu-item{--us-menu-item-height: 40px;--us-menu-item-padding-y: 0;--us-menu-item-padding-x: 1rem;--us-menu-item-padding-level: 2rem;--us-menu-item-font-size: 12px;--us-menu-item-font-weight: 500;--us-menu-item-gap: 1rem;--us-menu-item-icon-font-size: 16px;--us-menu-item-icon-color: var(--us-primary-color);--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0}.us-menu-item--selected{--us-menu-item-color: var(--us-primary-color);--us-overlay-color: var(--us-primary-color);--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-menu-group{--us-menu-group-height: 40px;--us-menu-group-padding-y: 0;--us-menu-group-padding-x: 1rem;--us-menu-group-padding-level: 2rem;--us-menu-group-font-size: 12px;--us-menu-group-font-weight: 700;--us-menu-group-gap: 1rem;--us-menu-group-border-width: 1px;--us-menu-group-border-color: #dee2e6}.us-menu-submenu{--us-_active-submenu-item-color: var(--us-primary-color);--us-_active-submenu-item-background: transparent}.us-menu-submenu>.us-menu-item--selected{--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-tab{--us-tab-color: var(--us-black-color);--us-tab-font-size: 12px;--us-tab-font-weight: 500;--us-tab-indicator-color: var(--us-primary-color);--us-tab-indicator-height: 2px;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-tab--selected{--us-tab-color: var(--us-primary-color);--us-_hover-overlay-color: inherit;--us-_active-overlay-color: inherit}:root{--us-primary-color: #990000;--us-secondary-color: #dde4eb;--us-success-color: #e1ae30;--us-info-color: #8862e0;--us-warning-color: #ffaf00;--us-danger-color: #ff0017;--us-black-color: #000;--us-white-color: #fff}
1
+ .us-icon{--us-icon-font-size: 1.5rem;--us-icon-color: inherit}.us-badge{--us-badge-padding-y: 0.125rem;--us-badge-padding-x: 0.325rem;--us-badge-font-size: 0.75rem;--us-badge-font-weight: 700;--us-badge-border-radius: 9999px;--us-badge-border-width: 2px;--us-badge-border-color: var(--us-white-color);--us-badge-color: var(--us-white-color);--us-badge-background: var(--us-primary-color);--us-overlay-color: inherit;--us-overlay-opacity: 0.08;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-color: inherit;--us-_active-overlay-opacity: 0.12}.us-chip{--us-chip-padding-y: 0.125rem;--us-chip-padding-x: 0.5rem;--us-chip-font-size: 0.75rem;--us-chip-font-weight: 700;--us-chip-border-radius: 9999px;--us-chip-color: var(--us-primary-color);--us-chip-background: transparent;--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-outline-border-width: 1px;--us-outline-border-color: transparent}.us-chip>.us-overlay{--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: initial;--us-_hover-overlay-opacity: initial;--us-_active-overlay-color: initial;--us-_active-overlay-opacity: initial}.us-chip--xs{--us-chip-height: 28px;--us-chip-padding-y: 0;--us-chip-padding-x: 0.5rem;--us-chip-font-size: 0.75rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.375rem}.us-chip--xs .us-icon{--us-icon-font-size: 0.75rem}.us-chip--sm{--us-chip-height: 32px;--us-chip-padding-y: 0;--us-chip-padding-x: 0.75rem;--us-chip-font-size: 14px;--us-chip-border-radius: 9999px;--us-chip-gap: 0.375rem}.us-chip--sm .us-icon{--us-icon-font-size: 0.875rem}.us-chip--md{--us-chip-height: 40px;--us-chip-padding-y: 0;--us-chip-padding-x: 1rem;--us-chip-font-size: 14px;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--md .us-icon{--us-icon-font-size: 1rem}.us-chip--lg{--us-chip-height: 48px;--us-chip-padding-y: 0;--us-chip-padding-x: 1.5rem;--us-chip-font-size: 1rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--lg .us-icon{--us-icon-font-size: 1.125rem}.us-chip--xl{--us-chip-height: 48px;--us-chip-padding-y: 0;--us-chip-padding-x: 1.5rem;--us-chip-font-size: 1rem;--us-chip-border-radius: 9999px;--us-chip-gap: 0.5rem}.us-chip--xl .us-icon{--us-icon-font-size: 1.25rem}.us-chip--filled{--us-chip-border-width: 1px;--us-chip-border-color: transparent;--us-chip-color: var(--us-white-color)}.us-chip--filled.us-chip--primary{--us-chip-background: var(--us-primary-color)}.us-chip--filled.us-chip--secondary{--us-chip-color: var(--us-black-color);--us-chip-background: var(--us-secondary-color)}.us-chip--filled.us-chip--success{--us-chip-background: var(--us-success-color)}.us-chip--filled.us-chip--info{--us-chip-background: var(--us-info-color)}.us-chip--filled.us-chip--warning{--us-chip-background: var(--us-warning-color)}.us-chip--filled.us-chip--danger{--us-chip-background: var(--us-danger-color)}.us-chip--outlined{--us-outline-border-color: currentColor}.us-chip--outlined.us-chip--primary{--us-chip-color: var(--us-primary-color)}.us-chip--outlined.us-chip--secondary{--us-chip-color: var(--us-black-color)}.us-chip--outlined.us-chip--success{--us-chip-color: var(--us-success-color)}.us-chip--outlined.us-chip--info{--us-chip-color: var(--us-info-color)}.us-chip--outlined.us-chip--warning{--us-chip-color: var(--us-warning-color)}.us-chip--outlined.us-chip--danger{--us-chip-color: var(--us-danger-color)}.us-chip--text.us-chip--primary{--us-chip-color: var(--us-primary-color)}.us-chip--text.us-chip--secondary{--us-chip-color: var(--us-black-color)}.us-chip--text.us-chip--success{--us-button-color: var(--us-success-color)}.us-chip--text.us-chip--info{--us-chip-color: var(--us-info-color)}.us-chip--text.us-chip--warning{--us-chip-color: var(--us-warning-color)}.us-chip--text.us-chip--danger{--us-chip-color: var(--us-danger-color)}.us-button{--us-button-font-weight: 500;--us-button-font-family: var(--us-font-sans);--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0.12;--us-outline-border-width: 1px;--us-outline-border-color: transparent}.us-button--xs{--us-button-height: 20px;--us-button-padding-y: 0;--us-button-padding-x: 0.5rem;--us-button-font-size: 0.625rem;--us-button-border-radius: 4px;--us-button-gap: 0.25rem}.us-button--xs .us-icon{--us-icon-font-size: 0.75rem}.us-button--sm{--us-button-height: 28px;--us-button-padding-y: 0;--us-button-padding-x: 0.75rem;--us-button-font-size: 0.75rem;--us-button-border-radius: 4px;--us-button-gap: 0.375rem}.us-button--sm .us-icon{--us-icon-font-size: 1rem}.us-button--md{--us-button-height: 36px;--us-button-padding-y: 0;--us-button-padding-x: 1rem;--us-button-font-size: 0.875rem;--us-button-border-radius: 4px;--us-button-gap: 0.5rem}.us-button--md .us-icon{--us-icon-font-size: 1.125rem}.us-button--lg{--us-button-height: 44px;--us-button-padding-y: 0;--us-button-padding-x: 1.25rem;--us-button-font-size: 1rem;--us-button-border-radius: 4px;--us-button-gap: 0.625rem}.us-button--lg .us-icon{--us-icon-font-size: 1.25rem}.us-button--xl{--us-button-height: 52px;--us-button-padding-y: 0;--us-button-padding-x: 1.5rem;--us-button-font-size: 1rem;--us-button-border-radius: 4px;--us-button-gap: 0.75rem}.us-button--xl .us-icon{--us-icon-font-size: 1.5rem}.us-button--filled{--us-button-border-width: 1px;--us-button-border-color: transparent;--us-button-color: var(--us-white-color)}.us-button--filled .us-chip{--us-chip-background: var(--us-white-color)}.us-button--filled.us-button--primary{--us-button-background: var(--us-primary-color)}.us-button--filled.us-button--secondary{--us-button-color: var(--us-black-color);--us-button-background: var(--us-secondary-color)}.us-button--filled.us-button--success{--us-button-background: var(--us-success-color)}.us-button--filled.us-button--info{--us-button-background: var(--us-info-color)}.us-button--filled.us-button--warning{--us-button-background: var(--us-warning-color)}.us-button--filled.us-button--danger{--us-button-background: var(--us-danger-color)}.us-button--outlined{--us-outline-border-color: currentColor}.us-button--outlined.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--outlined.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--outlined.us-button--success{--us-button-color: var(--us-success-color)}.us-button--outlined.us-button--info{--us-button-color: var(--us-info-color)}.us-button--outlined.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--outlined.us-button--danger{--us-button-color: var(--us-danger-color)}.us-button--text.us-button--primary{--us-button-color: var(--us-primary-color)}.us-button--text.us-button--secondary{--us-button-color: var(--us-black-color)}.us-button--text.us-button--success{--us-button-color: var(--us-success-color)}.us-button--text.us-button--info{--us-button-color: var(--us-info-color)}.us-button--text.us-button--warning{--us-button-color: var(--us-warning-color)}.us-button--text.us-button--danger{--us-button-color: var(--us-danger-color)}.us-menu{--us-menu-padding-y: 0;--us-menu-padding-x: 0;--us-menu-color: #343a40;--us-menu-background: #fff}.us-menu-item{--us-menu-item-height: 40px;--us-menu-item-padding-y: 0;--us-menu-item-padding-x: 1rem;--us-menu-item-padding-level: 2rem;--us-menu-item-font-size: 12px;--us-menu-item-font-weight: 500;--us-menu-item-border-radius: 0;--us-menu-item-gap: 1rem;--us-overlay-color: inherit;--us-overlay-opacity: 0;--us-_hover-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08}.us-menu-item__icon .us-icon{--us-icon-font-size: 16px;--us-icon-color: var(--us-primary-color)}.us-menu-item--selected{--us-menu-item-color: var(--us-primary-color);--us-overlay-color: var(--us-primary-color);--us-overlay-opacity: 0.08;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0.08}.us-menu-group{--us-menu-group-height: 40px;--us-menu-group-padding-y: 0;--us-menu-group-padding-x: 1rem;--us-menu-group-padding-level: 2rem;--us-menu-group-font-size: 12px;--us-menu-group-font-weight: 700;--us-menu-group-border-radius: 0;--us-menu-group-gap: 1rem;--us-menu-group-border-width: 1px;--us-menu-group-border-color: #dee2e6}.us-menu-submenu{--us-_active-submenu-item-color: var(--us-primary-color);--us-_active-submenu-item-background: transparent}.us-menu-submenu>.us-menu-item--selected{--us-overlay-opacity: 0;--us-_hover-overlay-opacity: 0;--us-_active-overlay-opacity: 0}.us-tab{--us-tab-color: var(--us-black-color);--us-tab-font-size: 0.8125rem;--us-tab-font-weight: 500;--us-tab-indicator-color: var(--us-primary-color);--us-tab-indicator-height: 3px;--us-tab-indicator-border-radius: 3px 3px 0px 0px;--us-overlay-opacity: 0;--us-overlay-color: inherit;--us-_hover-overlay-opacity: 0.08;--us-_active-overlay-opacity: 0.12}.us-tab--selected{--us-tab-color: var(--us-primary-color)}:root{--us-primary-color: #990000;--us-secondary-color: #dde4eb;--us-success-color: #e1ae30;--us-info-color: #8862e0;--us-warning-color: #ffaf00;--us-danger-color: #ff0017;--us-black-color: #000;--us-white-color: #fff;--us-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}
package/index.scss CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  @use 'scss/animation';
4
4
 
5
+ @use 'scss/utilities';
6
+
5
7
  /* Estilos CSS aquí */
6
8
  .slider-container {
7
9
  width: 300px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@unifiedsoftware/styles",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "license": "MIT",
5
5
  "files": [
6
6
  "index.scss",
package/scss/_utilities.scss ADDED
@@ -0,0 +1,103 @@
1
+ @use './variables' as *;
2
+
3
+ $breakpoints: (
4
+ xs: 0px,
5
+ sm: 600px,
6
+ md: 960px,
7
+ lg: 1264px,
8
+ xl: 1904px,
9
+ );
10
+
11
+ $spacer: 1rem;
12
+ $spacers: (
13
+ 0: 0,
14
+ 1: $spacer * 0.25,
15
+ 2: $spacer * 0.5,
16
+ 3: $spacer * 0.75,
17
+ 4: $spacer * 1,
18
+ 5: $spacer * 1.25,
19
+ 6: $spacer * 1.5,
20
+ 7: $spacer * 1.75,
21
+ 8: $spacer * 2,
22
+ );
23
+
24
+ $utilities: (
25
+ 'gap': (
26
+ properties: gap,
27
+ class: 'gap',
28
+ values: $spacers,
29
+ responsive: true,
30
+ ),
31
+ 'gap-x': (
32
+ properties: column-gap,
33
+ class: 'gap-x',
34
+ values: $spacers,
35
+ responsive: true,
36
+ ),
37
+ 'gap-y': (
38
+ properties: row-gap,
39
+ class: 'gap-y',
40
+ values: $spacers,
41
+ responsive: true,
42
+ ),
43
+ );
44
+
45
+ @each $key, $map in $utilities {
46
+ $properties: map-get($map, 'properties');
47
+ $class: map-get($map, 'class');
48
+ $values: map-get($map, 'values');
49
+ $responsive: map-get($map, 'responsive');
50
+
51
+ @if type-of($properties) == 'string' {
52
+ $properties: append((), $properties);
53
+ }
54
+
55
+ @each $key, $value in $values {
56
+ @if $class == '' {
57
+ .#{$prefix}#{$key} {
58
+ @each $property in $properties {
59
+ #{$property}: $value;
60
+ }
61
+ }
62
+ } @else {
63
+ .#{$prefix}#{$class}-#{'' + $key + ''} {
64
+ @each $property in $properties {
65
+ #{$property}: $value;
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }
71
+
72
+ @each $breakpointKey, $breakpointValue in $breakpoints {
73
+ @media screen and (min-width: $breakpointValue) {
74
+ @each $key, $map in $utilities {
75
+ $properties: map-get($map, 'properties');
76
+ $class: map-get($map, 'class');
77
+ $values: map-get($map, 'values');
78
+ $responsive: map-get($map, 'responsive');
79
+
80
+ @if type-of($properties) == 'string' {
81
+ $properties: append((), $properties);
82
+ }
83
+
84
+ @each $key, $value in $values {
85
+ @if $responsive == true {
86
+ @if $class == '' {
87
+ .#{$breakpointKey}\:#{$prefix}#{$key} {
88
+ @each $property in $properties {
89
+ #{$property}: $value;
90
+ }
91
+ }
92
+ } @else {
93
+ .#{$breakpointKey}\:#{$prefix}#{$class}-#{'' + $key + ''} {
94
+ @each $property in $properties {
95
+ #{$property}: $value;
96
+ }
97
+ }
98
+ }
99
+ }
100
+ }
101
+ }
102
+ }
103
+ }
package/scss/components/_badge.scss ADDED
@@ -0,0 +1,45 @@
1
+ @use '../variables' as *;
2
+ @use '../mixins/overlay' as *;
3
+
4
+ .#{$prefix}badge {
5
+ position: absolute;
6
+ padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
7
+ font-size: var(--#{$prefix}badge-font-size);
8
+ font-weight: var(--#{$prefix}badge-font-weight);
9
+ border: var(--#{$prefix}badge-border-width) solid var(--#{$prefix}badge-border-color);
10
+ border-radius: var(--#{$prefix}badge-border-radius);
11
+ color: var(--#{$prefix}badge-color);
12
+ background-color: var(--#{$prefix}badge-background);
13
+ display: inline-flex;
14
+
15
+ @include overlay();
16
+
17
+ &--top-left {
18
+ top: 10%;
19
+ left: 10%;
20
+ }
21
+
22
+ &--top-right {
23
+ right: 0;
24
+ top: 0;
25
+ transform: translate(50%, -50%);
26
+ // top: 10%;
27
+ // right: 10%;
28
+ }
29
+
30
+ &--bottom-left {
31
+ bottom: 10%;
32
+ left: 10%;
33
+ }
34
+
35
+ &--bottom-right {
36
+ bottom: 0;
37
+ right: 0;
38
+ }
39
+
40
+ &-wrapper {
41
+ flex-shrink: 0;
42
+ position: relative;
43
+ display: inline-flex;
44
+ }
45
+ }