0.0.7 • Published 2 years ago
@vtrmq09/input v0.0.7
create-svelte
Everything you need to build a Svelte project, powered by create-svelte
.
Creating a project
If you're seeing this, you've probably already done this step. Congrats!
# create a new project in the current directory
npm init svelte
# create a new project in my-app
npm init svelte my-app
Developing
Once you've created a project and installed dependencies with npm install
(or pnpm install
or yarn
), start a development server:
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
Building
To create a production version of your app:
npm run build
You can preview the production build with npm run preview
.
To deploy your app, you may need to install an adapter for your target environment.
css configuration variables
Modify the following variables to get the look you want:
:root {
/* Input and placeholder borders */
--radius-input-form: 0;
--radius-placeholder-input-form: 2px;
/* Input border color */
--color-border-top-input-form: transparent;
--color-border-right-input-form: transparent;
--color-border-bottom-input-form: #607d8b;
--color-border-left-input-form: transparent;
/* Text color */
--color-input-form: white;
/* Border color when focus is on input */
--color-focus-border-top-input-form: transparent;
--color-focus-border-right-input-form: transparent;
--color-focus-border-bottom-input-form: #56782e;
--color-focus-border-left-input-form: transparent;
/* Input background color */
--bg-input-form: transparent;
--bg-focus-input-form: transparent;
/* Placeholder text and background color */
--bg-placeholder-input-form: #a3e15b;
--color-placeholder-input-form: #9bcdf5;
--color-placeholder-focus-input-form: #333;
}
/* Styles for the icon */
.material-symbols-outlined {
font-variation-settings: "FILL" 0, "wght" 300, "GRAD" -25, "opsz" 40;
font-size: 24px;
color: #607d8b;
}