@ipscape/ips-input
Version:
A input component
6 lines • 10.3 kB
CSS
@import url(https://fonts.googleapis.com/css?family=Lato&display=swap);
/*!
* Bootstrap v5.3.2 (https://getbootstrap.com/)
* Copyright 2011-2023 The Bootstrap Authors
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/:root{--ips-gray-gray-0:#fff;--ips-gray-gray-10:#fafbfc;--ips-gray-gray-20:#f4f5f7;--ips-gray-gray-30:#ebecf0;--ips-gray-gray-40:#dfe1e5;--ips-gray-gray-50:#c1c7d0;--ips-gray-gray-60:#b3bac5;--ips-gray-gray-70:#a5adba;--ips-gray-gray-80:#97a0af;--ips-gray-gray-90:#8993a4;--ips-gray-gray-100:#7a869a;--ips-gray-gray-200:#6b778c;--ips-gray-gray-300:#5e6c84;--ips-gray-gray-400:#505f79;--ips-gray-gray-500:#42526e;--ips-gray-gray-600:#344563;--ips-gray-gray-700:#253858;--ips-gray-gray-800:#172b4d;--ips-gray-gray-900:#091e42;--ips-gray-gray-1000:#051632;--ips-primary-rgb:246,106,10;--ips-secondary-rgb:23,43,77;--ips-tertiary-rgb:255,255,255;--ips-success-rgb:54,179,126;--ips-info-rgb:0,101,255;--ips-warning-rgb:255,171,0;--ips-danger-rgb:255,86,48;--ips-light-rgb:151,160,175;--ips-dark-rgb:23,43,77;--ips-gray-rgb:23,43,77;--ips-orange-rgb:246,106,10;--ips-red-rgb:255,86,48;--ips-yellow-rgb:255,171,0;--ips-green-rgb:54,179,126;--ips-teal-rgb:0,184,217;--ips-blue-rgb:0,101,255;--ips-purple-rgb:101,84,192;--ips-primary-text-emphasis:#622a04;--ips-secondary-text-emphasis:#09111f;--ips-success-text-emphasis:#164832;--ips-info-text-emphasis:#002866;--ips-warning-text-emphasis:#640;--ips-danger-text-emphasis:#662213;--ips-light-text-emphasis:#253858;--ips-dark-text-emphasis:#253858;--ips-primary-bg-subtle:#fde1ce;--ips-secondary-bg-subtle:#d1d5db;--ips-success-bg-subtle:#d7f0e5;--ips-info-bg-subtle:#cce0ff;--ips-warning-bg-subtle:#fec;--ips-danger-bg-subtle:#ffddd6;--ips-light-bg-subtle:#bdc3cd;--ips-dark-bg-subtle:#505f79;--ips-primary-border-subtle:#fbc39d;--ips-secondary-border-subtle:#a2aab8;--ips-success-border-subtle:#afe1cb;--ips-info-border-subtle:#99c1ff;--ips-warning-border-subtle:#fd9;--ips-danger-border-subtle:#ffbbac;--ips-light-border-subtle:#6b778c;--ips-dark-border-subtle:#42526e;--ips-white-rgb:255,255,255;--ips-black-rgb:0,0,0;--ips-body-font-family:var(--ips-font-sans-serif);--ips-body-font-size:0.875rem;--ips-body-font-weight:400;--ips-body-line-height:1.5;--ips-body-color:#172b4d;--ips-body-color-rgb:23,43,77;--ips-body-bg:#fff;--ips-body-bg-rgb:255,255,255;--ips-emphasis-color:#000;--ips-emphasis-color-rgb:0,0,0;--ips-secondary-color:rgba(23,43,77,0.75);--ips-secondary-color-rgb:23,43,77;--ips-secondary-bg:#6b778c;--ips-secondary-bg-rgb:107,119,140;--ips-tertiary-color:rgba(23,43,77,0.5);--ips-tertiary-color-rgb:23,43,77;--ips-tertiary-bg:#7a869a;--ips-tertiary-bg-rgb:122,134,154;--ips-heading-color:#172b4d;--ips-link-color:#f66a0a;--ips-link-color-rgb:246,106,10;--ips-link-decoration:underline;--ips-link-hover-color:#c55508;--ips-link-hover-color-rgb:197,85,8;--ips-code-color:#e83e8c;--ips-highlight-color:#172b4d;--ips-highlight-bg:#fec;--ips-border-width:1px;--ips-border-style:solid;--ips-border-color:#dfe1e5;--ips-border-color-translucent:rgba(0,0,0,0.175);--ips-border-radius:3px;--ips-border-radius-sm:0.2rem;--ips-border-radius-lg:0.3rem;--ips-border-radius-xl:1rem;--ips-border-radius-xxl:2rem;--ips-border-radius-2xl:var(--ips-border-radius-xxl);--ips-border-radius-pill:50rem;--ips-box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15);--ips-box-shadow-sm:0 0.125rem 0.25rem rgba(0,0,0,0.075);--ips-box-shadow-lg:0 1rem 3rem rgba(0,0,0,0.175);--ips-box-shadow-inset:inset 0 1px 2px rgba(0,0,0,0.075);--ips-focus-ring-width:0.25rem;--ips-focus-ring-opacity:0.25;--ips-focus-ring-color:rgba(246,106,10,0.25);--ips-form-valid-color:#36b37e;--ips-form-valid-border-color:#36b37e;--ips-form-invalid-color:#ff5630;--ips-form-invalid-border-color:#ff5630}*,:after,:before{box-sizing:border-box}@media(prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}.small,small{font-size:.75rem}a{color:rgba(var(--ips-link-color-rgb),var(--ips-link-opacity,1));text-decoration:underline}a:hover{--ips-link-color-rgb:var(--ips-link-hover-color-rgb)}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}label{display:inline-block}input{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}:root{--ips-breakpoint-xs:0;--ips-breakpoint-sm:576px;--ips-breakpoint-md:768px;--ips-breakpoint-lg:992px;--ips-breakpoint-xl:1200px;--ips-breakpoint-xxl:1400px}.form-text{margin-top:.25rem;font-size:.75rem;color:var(--ips-secondary-color)}.form-control{display:block;width:100%;padding:.5rem .75rem;font-family:Lato;font-size:.875rem;font-weight:400;line-height:1;color:#172b4d;appearance:none;background-color:var(--ips-body-bg);background-clip:padding-box;border:var(--ips-border-width) solid #dfe1e5;border-radius:var(--ips-border-radius);transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.form-control{transition:none}}.form-control:focus{color:#172b4d;background-color:var(--ips-body-bg);border-color:#dfe1e5;outline:0;box-shadow:0 0 0 3px rgba(209,87,4,.08)}.form-control::-webkit-date-and-time-value{min-width:85px;height:1em;margin:0}.form-control::-webkit-datetime-edit{display:block;padding:0}.form-control::placeholder{color:#c1c7d0;opacity:1}.form-control:disabled{background-color:#f4f5f7;opacity:1}.form-control::file-selector-button{padding:.5rem .75rem;margin:-.5rem -.75rem;margin-inline-end:.75rem;color:#172b4d;background-color:var(--ips-tertiary-bg);pointer-events:none;border-color:inherit;border-style:solid;border-width:0;border-inline-end-width:var(--ips-border-width);border-radius:0;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion:reduce){.form-control::file-selector-button{transition:none}}.form-control:hover:not(:disabled):not([readonly])::file-selector-button{background-color:var(--ips-secondary-bg)}@keyframes progress-bar-stripes{0%{background-position-x:1rem}}.tooltip{--ips-tooltip-zindex:1080;--ips-tooltip-max-width:136px;--ips-tooltip-padding-x:8px;--ips-tooltip-padding-y:4px;--ips-tooltip-font-size:0.75rem;--ips-tooltip-color:#fff;--ips-tooltip-bg:#172b4d;--ips-tooltip-border-radius:3px;--ips-tooltip-opacity:0.8;--ips-tooltip-arrow-width:0.5rem;--ips-tooltip-arrow-height:0.4rem;z-index:var(--ips-tooltip-zindex);display:block;margin:var(--ips-tooltip-margin);font-family:var(--ips-font-sans-serif);font-style:normal;font-weight:400;line-height:1.5;text-align:left;text-align:start;text-decoration:none;text-shadow:none;text-transform:none;letter-spacing:normal;word-break:normal;white-space:normal;word-spacing:normal;line-break:auto;font-size:var(--ips-tooltip-font-size);word-wrap:break-word;opacity:0}@keyframes spinner-border{to{transform:rotate(1turn)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.placeholder{display:inline-block;min-height:1em;vertical-align:middle;cursor:wait;background-color:currentcolor;opacity:.5}@keyframes placeholder-glow{50%{opacity:.2}}@keyframes placeholder-wave{to{mask-position:-200% 0}}.text-danger{--ips-text-opacity:1;color:rgba(var(--ips-danger-rgb),var(--ips-text-opacity))}:root{--ips-indigo:#6610f2;--ips-pink:#e83e8c;--ips-cyan:#17a2b8;--ips-white:#fff;--ips-gray:#344563;--ips-gray-dark:#172b4d;--ips-primary:#f66a0a;--ips-secondary:#172b4d;--ips-tertiary:#fff;--ips-success:#36b37e;--ips-info:#0065ff;--ips-warning:#ffab00;--ips-danger:#ff5630;--ips-light:#97a0af;--ips-dark:#172b4d;--ips-gray:#172b4d;--ips-teal:#00b8d9;--ips-blue:#0065ff;--ips-purple:#6554c0;--ips-gray-0:#fff;--ips-gray-10:#fafbfc;--ips-gray-20:#f4f5f7;--ips-gray-30:#ebecf0;--ips-gray-40:#dfe1e5;--ips-gray-50:#c1c7d0;--ips-gray-60:#b3bac5;--ips-gray-70:#a5adba;--ips-gray-80:#97a0af;--ips-gray-90:#8993a4;--ips-gray-100:#7a869a;--ips-gray-200:#6b778c;--ips-gray-300:#5e6c84;--ips-gray-400:#505f79;--ips-gray-500:#42526e;--ips-gray-600:#344563;--ips-gray-700:#253858;--ips-gray-800:#172b4d;--ips-gray-900:#091e42;--ips-gray-1000:#051632;--ips-orange-lighter:#ffebda;--ips-orange-light:#ffad70;--ips-orange:#f66a0a;--ips-orange-dark:#d15704;--ips-orange-darker:#b44b03;--ips-red-lighter:#ffebe5;--ips-red-light:#ff8f73;--ips-red:#ff5630;--ips-red-dark:#bf2600;--ips-red-darker:#8a1b00;--ips-yellow-lighter:#fffae5;--ips-yellow-light:#ffe380;--ips-yellow:#ffab00;--ips-yellow-dark:#ff8b00;--ips-yellow-darker:#cc6f00;--ips-green-lighter:#ddf5ec;--ips-green-light:#b8ead7;--ips-green:#36b37e;--ips-green-dark:#064;--ips-green-darker:#032;--ips-font-sans-serif:"Lato";--ips-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--ips-gradient:linear-gradient(180deg,hsla(0,0%,100%,0.15),hsla(0,0%,100%,0))}::-webkit-scrollbar{width:8px;height:8px}.form-control[readonly]{background-color:transparent}:focus{outline:none}input[type=number]{padding-right:4px}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{display:none;width:0;height:0}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 50px #fff inset}.form-control{height:36px}@font-face{font-family:ips-glyphs;src:url(fonts/ips-glyphs.cf99f1ee.woff) format("woff"),url(fonts/ips-glyphs.2746267c.ttf) format("truetype");font-weight:400;font-style:normal;font-display:block}[class^=ico-]{font-family:ips-glyphs;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;color:#6b778c;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ico-danger:before{content:""}.ico-delete:before{content:""}.ico-eye-off:before{content:""}.ico-eye:before{content:""}.ico-help:before{content:""}.ico-search:before{content:""}span.required{color:#c1c7d0;font:Lato;font-style:italic;font-size:14px;padding-left:4px}.ips-validation{text-align:left!important}.tooltip{pointer-events:none}input[data-v-51145d10]:focus::-moz-placeholder{color:transparent}input[data-v-51145d10]:focus::placeholder{color:transparent}.ips-tooltip.ips-form-icon--password[data-v-51145d10]{position:absolute;top:.5rem;right:12px}