@esportsplus/ui 0.0.96 → 0.0.97
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.accordion{--max-height: 0;--transition-duration: var(--transition-duration-400)}.alert{--max-width: 480px}.alert-close,.alert-message{--transition-duration: var(--transition-duration-400)}.anchor{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400);--transition-duration: var(--transition-duration-400)}.banner--gradient{--from: rgba(3,0,19, .32);--to: var(--color-black-500)}.border{--border-color: var(--border-color-default);--border-color-default: var(--color-border-400);--border-style: solid;--border-width: var(--border-width-400)}.bubble{--background: var(--background-default);--background-default: var(--color-border-400);--border-radius: var(--border-radius-circle);--height: var(--size);--margin-horizontal: var(--size-100);--width: var(--size);--size: 6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal: calc(var(--size) / -2);--position-vertical: calc(var(--size) / -2)}.button{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: .64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--processing-400{--border-width: var(--border-width-400)}.button--processing-500{--border-width: var(--border-width-500)}.button--processing-600{--border-width: var(--border-width-600)}.button--processing-700{--border-width: var(--border-width-700)}.card{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}.container{--max-width: 1400px;--padding-horizontal: var(--size-600);--padding-vertical: 0px}.ellipsis{--animation-duration: 2s}.field{--transition-duration: var(--transition-duration-400);--width: 100%}.field--optional{--max-height: 0;--max-height-active: 0}.field.--active .field--optional{--max-height: var(--max-height-active)}.field-description,.field-error{--font-size: var(--font-size-300)}.field-error{--color: var(--color-red-400)}.field-mask{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-default: var(--background);--border-radius: var(--border-radius-400);--border-style: solid;--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-400);--box-shadow-default: var(--box-shadow-300);--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--outline-opacity: var(--outline-opacity-default);--outline-opacity-active: .32;--outline-opacity-default: 0;--outline-opacity-hover: 0;--outline-opacity-pressed: 0;--outline-spacing: 0px;--outline-width: var(--outline-width-default);--outline-width-active: 4px;--outline-width-default: 0px;--outline-width-hover: 0px;--outline-width-pressed: 0px;--padding-horizontal: 0px;--padding-vertical: var(--size-400)}.field.--active>.field-mask,.field.--active *:not(.field) .field-mask{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active);--outline-opacity: var(--outline-opacity-active);--outline-width: var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color: var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width: 0px}.field-required{--border-radius: var(--border-radius-circle);--size: 6px}.field-title{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500)}.field.--active .field-title{--color: var(--color-active)}.field:not(.--active):hover .field-title{--color: var(--color-hover)}.field:not(.--active):active .field-title{--color: var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent: var(--accent-default);--accent-active: var(--accent-default);--accent-default: var(--color-white-400);--accent-hover: var(--accent-default);--accent-pressed: var(--accent-default);--height: var(--size);--opacity: var(--opacity-default);--opacity-active: var(--opacity-default);--opacity-default: 1;--opacity-hover: var(--opacity-default);--opacity-pressed: var(--opacity-default);--rotate: 0deg;--scale: var(--scale-default);--scale-active: var(--scale-default);--scale-default: 1;--scale-hover: var(--scale-default);--scale-pressed: var(--scale-default);--size: var(--size-600);--width-switch: 40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX: 0px;--translateY: 0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent: var(--accent-hover);--opacity: var(--opacity-hover);--scale: var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent: var(--accent-pressed);--opacity: var(--opacity-pressed);--scale: var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent: var(--accent-active);--opacity: var(--opacity-active);--scale: var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal: calc(var(--width-switch) - var(--width));--width: var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow: 0 1px 0 rgba(0,0,0, .16)}.field-mask--checkbox{--border-radius: var(--border-radius-300);--rotate: 45deg;--scale-active: 1;--scale-default: 0;--scale-hover: 1.08;--scale-pressed: .98}.field-mask--checkbox:before{--box-shadow: 1px 1px 0 rgba(0,0,0, .16);--border-width: 5px;--height: 110%;--translateX: 108%;--translateY: 8%;--width: 50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY: 100%}.field-mask--radio{--border-radius: var(--border-radius-circle);--opacity-active: 1;--opacity-default: .4;--scale-active: .9;--scale-default: 0;--scale-hover: .8;--scale-pressed: .7}.field-mask--radio:before{--height: calc((var(--size) / 2) - (var(--border-width) * 2));--translateX: 50%;--translateY: 50%;--width: var(--height)}.field-mask--switch{--border-radius: var(--border-radius-curved);--padding-horizontal: var(--border-width-400);--padding-vertical: var(--border-width-400);--width: var(--width-switch)}.field-mask--switch:before{--height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));--width: var(--height)}.field.--active .field-mask--switch:before{--translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.field-mask--input,.field-mask--select{--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.field-mask--input{--size: var(--size-400)}.field-mask--select{--arrow-spacer: 1px;--arrow-size: 6px}.field-mask-arrow{--border-width: var(--border-width-500)}.group{--margin-horizontal: var(--size-400);--width: auto}.group.--flex-column .group-item{--width: 100%}.group--scroller .group-item{--margin-vertical: 0px}.icon{--color: inherit;--height: var(--size);--margin-horizontal: var(--size-300);--size: var(--size-400);--width: var(--size)}.link{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.link.--active{--background: var(--background-active);--border-color: var(--border-color-active);--color: var(--color-active)}.link:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--color: var(--color-hover)}.link:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--color: var(--color-pressed)}.loading{--animation-delay: calc(0s + (32ms * var(--i)));--animation-duration: calc(.64s * (var(--i) + 1.5));--border-color: inherit;--border-style: solid;--border-width: var(--border-width-400);--box-shadow: none;--height: calc(var(--size) * var(--multiplier));--i: 0;--multiplier: calc(1 - (.2 * var(--i)));--size: var(--size-400);--transition-duration: var(--transition-duration-400);--width: calc(var(--size) * var(--multiplier))}.loading .loading{--i: 1;--size: inherit}.loading .loading .loading{--i: 2}.loading .loading .loading .loading{--i: 3}.loading .loading .loading .loading .loading{--i: 4}.modal{--max-height: calc(100svh - (var(--margin) * 2));--max-width: 320px;--width: calc(100svw - (var(--margin) * 2))}.modal,.modal-frame{--transition-duration: var(--transition-duration-300)}.page-subtitle,.page-suptitle{--color: var(--color-default);--color-default: var(--color-text-400);--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.page-title{--color: var(--color-default);--color-default: var(--color-text-500);--line-height: var(--line-height-400)}.processing{--animation-duration: 2.64s;--border-color-primary: var(--color-black-500);--border-color-secondary: var(--color-border-300);--border-style: solid;--border-width: var(--border-width-600);--height: var(--size);--opacity: .64;--size: var(--size-600);--width: var(--size)}body{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--box-shadow-300: 0px 8px 16px -4px rgba(0, 3, 19, .016), 0px 4px 8px -2px rgba(0, 3, 19, .008);--box-shadow-400: 0px 16px 24px -4px rgba(0, 3, 19, .048), 0px 8px 8px -4px rgba(0, 3, 19, .024);--box-shadow-500: 0px 16px 32px -8px rgba(0, 3, 19, .16);--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: 8px;--font-size-200: 10px;--font-size-300: 12px;--font-size-400: 14px;--font-size-500: 16px;--font-size-600: 24px;--font-size-700: 32px;--font-size-800: 40px;--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 96px;--spacer-400: 144px;--spacer-500: 192px;--transition-duration-300: .08s;--transition-duration-400: .16s;--transition-duration-500: .24s;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-800)}h2{--font-size: var(--font-size-700)}h3{--font-size: var(--font-size-600)}h4{--font-size: var(--font-size-500)}h5{--font-size: var(--font-size-400)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}.scrollbar{--background-default: transparent;--height: 0;--transition-duration: var(--transition-duration-400);--translate: translate3d(0, 0, 0)}.sidebar{--position-horizontal: 0px;--position-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: var(--width-default);--width-closed: var(--width-default);--width-default: 320px}.sidebar:not(.--active):not(:hover){--width: var(--width-closed)}.sidebar--floating{--position-horizontal: var(--size-100);--position-vertical: var(--size-100)}.text{--color: var(--color-default);--color-default: inherit;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--transition-duration: var(--transition-duration-400);--width: auto}.thumbnail{--background: transparent;--border-radius: var(--border-radius-300);--height: var(--size);--size: var(--size-700);--width: var(--size)}.tooltip-content,.tooltip-message{--background: var(--background-default);--background-default: transparent;--border-radius: var(--border-radius-300);--box-shadow: var(--box-shadow-400);--max-width: calc(90vw - (var(--size-700) * 2));--min-width: auto;--scaleX: .64;--scaleY: .64;--spacer: var(--size-300);--transition-duration: var(--transition-duration-300);--width: auto}.tooltip-message{--background-default: var(--color-black-400);--color: var(--color-white-400);--font-size: var(--font-size-300);--font-weight: var(--font-weight-400);--padding-horizontal: var(--size-300);--padding-vertical: var(--size-300)}
|
|
1
|
+
.accordion{--max-height: 0;--transition-duration: var(--transition-duration-400)}.alert{--max-width: 480px}.alert-close,.alert-message{--transition-duration: var(--transition-duration-400)}.anchor{--margin-horizontal: var(--size-400);--margin-vertical: var(--size-400);--transition-duration: var(--transition-duration-400)}.banner--gradient{--from: rgba(3,0,19, .32);--to: var(--color-black-500)}.border{--border-color: var(--border-color-default);--border-color-default: var(--color-border-400);--border-style: solid;--border-width: var(--border-width-400)}.bubble{--background: var(--background-default);--background-default: var(--color-border-400);--border-radius: var(--border-radius-circle);--height: var(--size);--margin-horizontal: var(--size-100);--width: var(--size);--size: 6px}.bubble--bottom-left,.bubble--bottom-right,.bubble--top-left,.bubble--top-right{--position-horizontal: calc(var(--size) / -2);--position-vertical: calc(var(--size) / -2)}.button{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.button.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active)}.button:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover)}.button:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed)}.button--processing{--animation-duration: .64s;--border-color: var(--color);--border-width: var(--border-width-400);--size: var(--size-400)}.button--processing-400{--border-width: var(--border-width-400)}.button--processing-500{--border-width: var(--border-width-500)}.button--processing-600{--border-width: var(--border-width-600)}.button--processing-700{--border-width: var(--border-width-700)}.card{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-300);--box-shadow-default: none;--box-shadow-hover: var(--box-shadow-300);--box-shadow-pressed: none;--padding-horizontal: 0px;--padding-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: auto}.card.--active{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active)}.card:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover)}.card:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed)}.container{--max-width: 1400px;--padding-horizontal: var(--size-600);--padding-vertical: 0px}.ellipsis{--animation-duration: 2s}.field{--transition-duration: var(--transition-duration-400);--width: 100%}.field--optional{--max-height: 0;--max-height-active: 0}.field.--active .field--optional{--max-height: var(--max-height-active)}.field-description,.field-error{--font-size: var(--font-size-300)}.field-error{--color: var(--color-red-400)}.field-mask{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-default: var(--background);--border-radius: var(--border-radius-400);--border-style: solid;--border-width: 0px;--box-shadow: var(--box-shadow-default);--box-shadow-active: var(--box-shadow-400);--box-shadow-default: var(--box-shadow-300);--box-shadow-hover: var(--box-shadow-400);--box-shadow-pressed: none;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--outline-opacity: var(--outline-opacity-default);--outline-opacity-active: .32;--outline-opacity-default: 0;--outline-opacity-hover: 0;--outline-opacity-pressed: 0;--outline-spacing: 0px;--outline-width: var(--outline-width-default);--outline-width-active: 4px;--outline-width-default: 0px;--outline-width-hover: 0px;--outline-width-pressed: 0px;--padding-horizontal: 0px;--padding-vertical: var(--size-400)}.field.--active>.field-mask,.field.--active *:not(.field) .field-mask{--background: var(--background-active);--border-color: var(--border-color-active);--box-shadow: var(--box-shadow-active);--color: var(--color-active);--outline-opacity: var(--outline-opacity-active);--outline-width: var(--outline-width-active)}label.field:not(.--active):not(.--active):hover>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}label.field:not(.--active):not(.--active):active>.field-mask,.field:not(.--active):not(label) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--outline:not(.--active):active{--border-color: var(--border-color-default)}.field-mask--outline:not(.--active):active:before{--outline-width: 0px}.field-required{--border-radius: var(--border-radius-circle);--size: 6px}.field-title{--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500)}.field.--active .field-title{--color: var(--color-active)}.field:not(.--active):hover .field-title{--color: var(--color-hover)}.field:not(.--active):active .field-title{--color: var(--color-pressed)}.field label.field:not(.--active):hover,.field:not(label):not(.--active) .field-mask:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--box-shadow: var(--box-shadow-hover);--color: var(--color-hover);--outline-opacity: var(--outline-opacity-hover);--outline-width: var(--outline-width-hover)}.field label.field:not(.--active):active,.field:not(label):not(.--active) .field-mask:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--box-shadow: var(--box-shadow-pressed);--color: var(--color-pressed);--outline-opacity: var(--outline-opacity-pressed);--outline-width: var(--outline-width-pressed)}.field-mask--checkbox,.field-mask--radio,.field-mask--switch{--accent: var(--accent-default);--accent-active: var(--accent-default);--accent-default: var(--color-white-400);--accent-hover: var(--accent-default);--accent-pressed: var(--accent-default);--height: var(--size);--opacity: var(--opacity-default);--opacity-active: var(--opacity-default);--opacity-default: 1;--opacity-hover: var(--opacity-default);--opacity-pressed: var(--opacity-default);--rotate: 0deg;--scale: var(--scale-default);--scale-active: var(--scale-default);--scale-default: 1;--scale-hover: var(--scale-default);--scale-pressed: var(--scale-default);--size: var(--size-600);--width-switch: 40px}.field-mask--checkbox:before,.field-mask--radio:before,.field-mask--switch:before{--translateX: 0px;--translateY: 0px}.field-mask--checkbox label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):hover,.field-mask--radio label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--radio:not(.--active):hover,.field-mask--switch label.field:not(.--active):not(.--active):hover,.field:not(label):not(.--active) .field-mask--switch:not(.--active):hover{--accent: var(--accent-hover);--opacity: var(--opacity-hover);--scale: var(--scale-hover)}.field-mask--checkbox label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--checkbox:not(.--active):active,.field-mask--radio label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--radio:not(.--active):active,.field-mask--switch label.field:not(.--active):not(.--active):active,.field:not(label):not(.--active) .field-mask--switch:not(.--active):active{--accent: var(--accent-pressed);--opacity: var(--opacity-pressed);--scale: var(--scale-pressed)}.field.--active .field-mask--checkbox,.field.--active .field-mask--radio,.field.--active .field-mask--switch{--accent: var(--accent-active);--opacity: var(--opacity-active);--scale: var(--scale-active)}.field-mask--checkbox,.field-mask--radio{--margin-horizontal: calc(var(--width-switch) - var(--width));--width: var(--height)}.field-mask--radio:before,.field-mask--switch:before{--box-shadow: 0 1px 0 rgba(0,0,0, .16)}.field-mask--checkbox{--border-radius: var(--border-radius-300);--rotate: 45deg;--scale-active: 1;--scale-default: 0;--scale-hover: 1.08;--scale-pressed: .98}.field-mask--checkbox:before{--box-shadow: 1px 1px 0 rgba(0,0,0, .16);--border-width: 5px;--height: 110%;--translateX: 108%;--translateY: 8%;--width: 50%}.field:not(.--active):not(:hover) .field-mask--checkbox:before{--translateY: 100%}.field-mask--radio{--border-radius: var(--border-radius-circle);--opacity-active: 1;--opacity-default: .4;--scale-active: .9;--scale-default: 0;--scale-hover: .8;--scale-pressed: .7}.field-mask--radio:before{--height: calc((var(--size) / 2) - (var(--border-width) * 2));--translateX: 50%;--translateY: 50%;--width: var(--height)}.field-mask--switch{--border-radius: var(--border-radius-curved);--padding-horizontal: var(--border-width-400);--padding-vertical: var(--border-width-400);--width: var(--width-switch)}.field-mask--switch:before{--height: calc(var(--size) - (var(--border-width) * 2) - (var(--padding-vertical) * 2));--width: var(--height)}.field.--active .field-mask--switch:before{--translateX: calc(var(--width-switch) - (var(--border-width) * 2) - var(--height) - (var(--padding-horizontal) * 2))}.field-mask--input,.field-mask--select{--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.field-mask--input{--size: var(--size-400)}.field-mask--select{--arrow-spacer: 1px;--arrow-size: 6px}.field-mask-arrow{--border-width: var(--border-width-500)}.group{--margin-horizontal: var(--size-400);--width: auto}.group.--flex-column .group-item{--width: 100%}.group--scroller .group-item{--margin-vertical: 0px}.icon{--color: inherit;--height: var(--size);--margin-horizontal: var(--size-300);--size: var(--size-400);--width: var(--size)}.link{--background: var(--background-default);--background-active: var(--background-default);--background-default: transparent;--background-hover: var(--background-default);--background-pressed: var(--background-default);--border-color: var(--border-color-default);--border-color-active: var(--border-color-default);--border-color-default: var(--background);--border-color-hover: var(--border-color-default);--border-color-pressed: var(--border-color-default);--border-radius: var(--border-radius-400);--border-width: 0px;--color: var(--color-default);--color-active: var(--color-default);--color-default: var(--color-text-400);--color-hover: var(--color-default);--color-pressed: var(--color-default);--font-size: var(--font-size-400);--font-weight: var(--font-weight-500);--line-height: var(--line-height-400);--padding-horizontal: var(--size-400);--padding-vertical: var(--size-400);--transition-duration: var(--transition-duration-400);--width: auto}.link.--active{--background: var(--background-active);--border-color: var(--border-color-active);--color: var(--color-active)}.link:not(.--active):hover{--background: var(--background-hover);--border-color: var(--border-color-hover);--color: var(--color-hover)}.link:not(.--active):active{--background: var(--background-pressed);--border-color: var(--border-color-pressed);--color: var(--color-pressed)}.loading{--animation-delay: calc(0s + (32ms * var(--i)));--animation-duration: calc(.64s * (var(--i) + 1.5));--border-color: inherit;--border-style: solid;--border-width: var(--border-width-400);--box-shadow: none;--height: calc(var(--size) * var(--multiplier));--i: 0;--multiplier: calc(1 - (.2 * var(--i)));--size: var(--size-400);--transition-duration: var(--transition-duration-400);--width: calc(var(--size) * var(--multiplier))}.loading .loading{--i: 1;--size: inherit}.loading .loading .loading{--i: 2}.loading .loading .loading .loading{--i: 3}.loading .loading .loading .loading .loading{--i: 4}.modal{--max-height: calc(100svh - (var(--margin) * 2));--max-width: 320px;--width: calc(100svw - (var(--margin) * 2))}.modal,.modal-frame{--transition-duration: var(--transition-duration-300)}.page-subtitle,.page-suptitle{--color: var(--color-default);--color-default: var(--color-text-400);--font-size: var(--font-size-400);--line-height: var(--line-height-400)}.page-title{--color: var(--color-default);--color-default: var(--color-text-500);--line-height: var(--line-height-400)}.processing{--animation-duration: 2.64s;--border-color-primary: var(--color-black-500);--border-color-secondary: var(--color-border-300);--border-style: solid;--border-width: var(--border-width-600);--height: var(--size);--opacity: .64;--size: var(--size-600);--width: var(--size)}body{--border-radius-0px: 0px;--border-radius-circle: 100%;--border-radius-curved: 240px;--border-radius-100: 2px;--border-radius-200: 4px;--border-radius-300: 6px;--border-radius-400: 8px;--border-radius-500: 12px;--border-radius-600: 16px;--box-shadow-300: 0px 8px 16px -4px rgba(0, 3, 19, .016), 0px 4px 8px -2px rgba(0, 3, 19, .008);--box-shadow-400: 0px 16px 24px -4px rgba(0, 3, 19, .048), 0px 8px 8px -4px rgba(0, 3, 19, .024);--box-shadow-500: 0px 16px 32px -8px rgba(0, 3, 19, .16);--border-width-400: 1px;--border-width-500: 2px;--border-width-600: 3px;--border-width-700: 4px;--color-black-300: #0f1325;--color-black-400: #04081a;--color-black-500: #000313;--color-blue-300: #3453ff;--color-blue-400: #2a4bff;--color-blue-500: #2343f8;--color-border-300: #c4c9df;--color-border-400: #b4b9d2;--color-border-500: #a5a9c3;--color-green-300: #5fff81;--color-green-400: #2aff57;--color-green-500: #23f850;--color-grey-300: #f2f9ff;--color-grey-400: #e7f1fa;--color-grey-500: #dde8f0;--color-purple-300: #6634ff;--color-purple-400: #5e2aff;--color-purple-500: #5723f8;--color-red-300: #ff3446;--color-red-400: #ff2a3d;--color-red-500: #f82336;--color-text-300: #676c84;--color-text-400: #393d57;--color-text-500: #1f2542;--color-white-300: #fff;--color-white-400: #fff;--color-white-500: #fff;--color-yellow-300: #fff95f;--color-yellow-400: #fff92a;--color-yellow-500: #f8f123;--font-size-100: 8px;--font-size-200: 10px;--font-size-300: 12px;--font-size-400: 14px;--font-size-500: 16px;--font-size-600: 24px;--font-size-700: 32px;--font-size-800: 40px;--font-weight-300: 400;--font-weight-400: 500;--font-weight-500: 600;--font-weight-600: 700;--line-height-100: 1;--line-height-200: 1.2;--line-height-300: 1.4;--line-height-400: 1.6;--size-0px: 0px;--size-100: 4px;--size-200: 8px;--size-300: 12px;--size-400: 16px;--size-500: 20px;--size-600: 24px;--size-700: 32px;--size-800: 40px;--size-900: 48px;--spacer-300: 48px;--spacer-400: 96px;--spacer-500: 144px;--transition-duration-300: .08s;--transition-duration-400: .16s;--transition-duration-500: .24s;--background: var(--color-grey-400);--color: var(--color-text-400);--font-family: "Montserrat", sans-serif;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--min-width: 320px;--scrollbar-width: 17px}section{--width: 100%}h1,h2,h3,h4,h5{--color: var(--color-text-400);--font-weight: var(--font-weight-600);--line-height: var(--line-height-300)}h1{--font-size: var(--font-size-800)}h2{--font-size: var(--font-size-700)}h3{--font-size: var(--font-size-600)}h4{--font-size: var(--font-size-500)}h5{--font-size: var(--font-size-400)}b,strong{--color: var(--color-text-400);--font-weight: var(--font-weight-500)}.scrollbar{--background-default: transparent;--height: 0;--transition-duration: var(--transition-duration-400);--translate: translate3d(0, 0, 0)}.sidebar{--position-horizontal: 0px;--position-vertical: 0px;--transition-duration: var(--transition-duration-400);--width: var(--width-default);--width-closed: var(--width-default);--width-default: 320px}.sidebar:not(.--active):not(:hover){--width: var(--width-closed)}.sidebar--floating{--position-horizontal: var(--size-100);--position-vertical: var(--size-100)}.text{--color: var(--color-default);--color-default: inherit;--font-size: var(--font-size-400);--font-weight: var(--font-weight-400);--line-height: var(--line-height-400);--transition-duration: var(--transition-duration-400);--width: auto}.thumbnail{--background: transparent;--border-radius: var(--border-radius-300);--height: var(--size);--size: var(--size-700);--width: var(--size)}.tooltip-content,.tooltip-message{--background: var(--background-default);--background-default: transparent;--border-radius: var(--border-radius-300);--box-shadow: var(--box-shadow-400);--max-width: calc(90vw - (var(--size-700) * 2));--min-width: auto;--scaleX: .64;--scaleY: .64;--spacer: var(--size-300);--transition-duration: var(--transition-duration-300);--width: auto}.tooltip-message{--background-default: var(--color-black-400);--color: var(--color-white-400);--font-size: var(--font-size-300);--font-weight: var(--font-weight-400);--padding-horizontal: var(--size-300);--padding-vertical: var(--size-300)}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
@use 'size';
|
|
3
3
|
|
|
4
4
|
$spacer: (
|
|
5
|
-
300: lib.map-get(size.$size, 900) *
|
|
6
|
-
400: lib.map-get(size.$size, 900) *
|
|
7
|
-
500: lib.map-get(size.$size, 900) *
|
|
5
|
+
300: lib.map-get(size.$size, 900) * 1,
|
|
6
|
+
400: lib.map-get(size.$size, 900) * 2,
|
|
7
|
+
500: lib.map-get(size.$size, 900) * 3
|
|
8
8
|
);
|