xtreme-ui
Version:
Collection of reusable components that can be used in web projects
2 lines (1 loc) • 4.02 kB
CSS
.xtrTextfield{--fontSize: 14px;--primaryColor: var(--colorBackgroundSecondary);--secondaryColor: var(--colorBackgroundPrimary);position:relative;width:300px;display:flex;justify-content:center;align-items:center;border-radius:22px;box-shadow:0 0 0 1px hsl(var(--colorBrandPrimary)/50%);background:var(--primaryColor);color:hsl(var(--colorContentPrimary));transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield:before{content:"";position:absolute;display:block;width:100%;height:100%;background:hsl(var(--colorBrandPrimary));clip-path:circle(0% at 22px 50%);border-radius:9999px;z-index:0;opacity:0;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .xIcon{position:absolute;left:0;width:44px;height:44px;font-size:calc(var(--fontSize) + 2px);color:hsl(var(--colorBrandPrimary)/100%);pointer-events:none;transition:all 0s}.xtrTextfield .dialCode{position:absolute;left:0;display:flex;align-items:center;gap:4px}.xtrTextfield .dialCode span{display:flex;width:44px;height:44px;background-size:cover;background-position:center;border-radius:9999px;scale:.8}.xtrTextfield .dialCode p{margin:0;font-size:var(--fontSize);transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input{width:100%;outline:none;border:none;background:transparent;padding:20px 22px 6px;line-height:18px;z-index:1;font-size:var(--fontSize);font-variation-settings:"wdth" 75,"wght" 400;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield .input[type=number]::-webkit-inner-spin-button,.xtrTextfield .input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.xtrTextfield .input[type=number]{appearance:textfield}.xtrTextfield .placeholder{position:absolute;left:0;display:flex;align-items:center;color:var(--colorContentSecondary);translate:16px 0;transform-origin:0 50%;font-size:var(--fontSize);line-height:20px;padding:0 8px;z-index:2;pointer-events:none;transition:all var(--animDurDefault) var(--cubicBezierPrimary)}.xtrTextfield.withIcon:before{clip-path:circle(16px at 22px 50%);opacity:.4}.xtrTextfield.withIcon .input{padding-left:48px}.xtrTextfield.withIcon .placeholder{translate:40px 0}.xtrTextfield.textarea .input{height:200px;padding:0 22px;margin:26px 0 8px;resize:none}.xtrTextfield.textarea .placeholder{top:0;translate:16px 20px}.xtrTextfield.phone .input{padding-left:74px}.xtrTextfield.phone .placeholder{translate:68px 0}.xtrTextfield.hasValue .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield.hasValue .placeholder:before{scale:1}.xtrTextfield.hasValue.withIcon .placeholder,.xtrTextfield.hasValue.phone .placeholder{translate:42px -9px}.xtrTextfield.hasValue.phone .dialCode p{margin-top:14px}.xtrTextfield.hasValue.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within,.xtrTextfield.active{box-shadow:0 0 0 2px hsl(var(--colorBrandPrimary)/50%);background:var(--secondaryColor)}.xtrTextfield:focus-within .placeholder,.xtrTextfield.active .placeholder{font-variation-settings:"wdth" 75,"wght" 700;color:hsl(var(--colorBrandPrimary)/100%);translate:16px -9px;scale:.75}.xtrTextfield:focus-within .placeholder:before,.xtrTextfield.active .placeholder:before{scale:1}.xtrTextfield:focus-within.withIcon .placeholder,.xtrTextfield.active.withIcon .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .placeholder,.xtrTextfield.active.phone .placeholder{translate:42px -9px}.xtrTextfield:focus-within.phone .dialCode p,.xtrTextfield.active.phone .dialCode p{margin-top:14px}.xtrTextfield:focus-within.textarea .placeholder,.xtrTextfield.active.textarea .placeholder{translate:16px 8px}.xtrTextfield:focus-within.withIcon:before,.xtrTextfield.active.withIcon:before{clip-path:circle(18px at 22px 50%);opacity:.8}.xtrTextfield:focus-within.withIcon .xIcon,.xtrTextfield.active.withIcon .xIcon{color:#fff;font-weight:900}.xtrTextfield:focus-within .input,.xtrTextfield.active .input{cursor:text}