💄Style: Criando estilos para os inputs.

axeet · Feb 3, 2024 · 6ad71ae · 6ad71ae
1 parent 695f673
commit 6ad71ae
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 6 deletions.
diff --git a/css/inputsStyle/inputStyle.css b/css/inputsStyle/inputStyle.css
@@ -0,0 +1,52 @@
+.input {
+    color: #fff;
+    font-size: 0.9rem;
+    background-color: transparent;
+    width: 100%;
+    box-sizing: border-box;
+    padding-inline: 0.5em;
+    padding-block: 0.7em;
+    border: none;
+    border-bottom: var(--border-height) solid var(--border-before-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.input-border {
+    position: absolute;
+    background: var(--border-after-color);
+    width: 0%;
+    height: 2px;
+    bottom: 0;
+    left: 0;
+    transition: width 0.3s cubic-bezier(0.6, -0.28, 0.735, 0.045);
+}
+
+.input:focus {
+    outline: none;
+}
+
+.input:focus + .input-border {
+    width: 100%;
+}
+
+.form-control {
+    position: relative;
+    --width-of-input: 300px;
+}
+
+.input-alt {
+    font-size: 1.2rem;
+    padding-inline: 1em;
+    padding-block: 0.8em;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.input-border-alt {
+    height: 3px;
+    background: linear-gradient(90deg, #FF6464 0%, #FFBF59 50%, #47C9FF 100%);
+    transition: width 0.4s cubic-bezier(0.42, 0, 0.58, 1.00);
+}
+
+.input-alt:focus + .input-border-alt {
+    width: 100%;
+}
diff --git a/index.html b/index.html
@@ -11,6 +11,7 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
     <link rel="stylesheet" href="./assets/codemirror-5.65.16/lib/codemirror.css">
     <link rel="stylesheet" href="./assets/codemirror-5.65.16/theme/dracula.css">
+    <link rel="stylesheet" href="./css/inputsStyle/inputStyle.css">
 
     <style>
         .CodeMirror { border: 1px solid silver; }
@@ -49,17 +50,20 @@
                     </div>
 
                     <div class="form-floating mb-3">
-                        <input type="text" class="form-control" id="titleCheat" placeholder="Axeet">
+                        <input type="text" class="form-control input input-alt" id="titleCheat" placeholder="Axeet">
+                        <span class="input-border input-border-alt"></span>
                         <label for="titleCheat">Titulo</label>
                     </div>
 
                     <div class="form-floating mb-3">
-                        <input type="text" class="form-control" id="author" placeholder="AxeetUser">
+                        <input type="text" class="form-control input input-alt" id="author" placeholder="AxeetUser">
+                        <span class="input-border input-border-alt"></span>
                         <label for="author">Author</label>
                     </div>
 
                     <div class="form-floating mb-3">
-                        <input type="text" class="form-control" id="cheatSheet" placeholder="Linux">
+                        <input type="text" class="form-control input-alt input" id="cheatSheet" placeholder="Linux">
+                        <span class="input-border input-border-alt"></span>
                         <label for="cheatSheet">Cheat Sheet</label>
                     </div>
                     <div class="mb-1 d-grid gap-2">
@@ -70,7 +74,8 @@
                         </button>
                     </div>
                     <div class="form-floating mb-3">
-                        <input type="text" class="form-control" id="topicName" placeholder="files">
+                        <input type="text" class="form-control input-alt input" id="topicName" placeholder="files">
+                        <span class="input-border input-border-alt"></span>
                         <label for="topicName">Tópico</label>
                     </div>
                     <div class="mb-1 d-grid gap-2">
@@ -83,12 +88,14 @@
                     <div id="cheat" class="mb-3"
                          style="width: 394px; height: 150px; overflow-y: scroll; border: yellow">
                         <div class="form-floating mb-3">
-                            <input type="text" class="form-control" id="codeCheat" placeholder="ls">
+                            <input type="text" class="form-control input-alt input" id="codeCheat" placeholder="ls">
+                            <span class="input-border input-border-alt"></span>
                             <label for="codeCheat">Código</label>
                         </div>
 
                         <div class="form-floating mb-3">
-                            <input type="text" class="form-control" id="description" placeholder="Ver Pastas">
+                            <input type="text" class="form-control input-alt input" id="description" placeholder="Ver Pastas">
+                            <span class="input-border input-border-alt"></span>
                             <label for="description">Descrição</label>
                         </div>
                     </div>