feat: alterando visual dos inputs

b2wads · Aug 16, 2023 · e28fd17 · e28fd17
1 parent 028117e
commit e28fd17
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 62 deletions.
diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl
@@ -3,9 +3,10 @@ Variables
 ========================================================================== */
 /* Color
 ========================================================================== */
-$c-label = #A1A1A1;
+$c-label = #00A0b2;
 $c-label-active = #878786;
 $c-text-default = #333;
+$c-border-input = #60605f;
 
 /* ==========================================================================
 Form Label Component
@@ -15,36 +16,27 @@ Form Label Component
 }
 
 .controlledLabel {
-  color: $c-label;
-  font-size: 16px;
+  position: relative;
+  left: 6px;
+
+  pointer-events: none;
+
+  font-size: 12px;
   font-weight: 400;
-  left: 0;
   line-height: 1;
-  pointer-events: none;
-  position: absolute;
-  top: 10px;
-  transition: all 0.25s ease;
+
+  background: white;
+  color: $c-label;
 }
 
 .isActive, .isAutofilled {
   font-size: 12px;
-  left: 0;
-  top: -1.5rem;
-  transition: all 0.125s ease;
-  color: $c-label-active;
-
-  &.isHovered {
-    color: var(--c-support-dark);
-  }
-
-  &.labelHighLight {
-    color: var(--c-active-input);
-  }
+  color: $c-label;
 }
 
 .formControl {
-  color: $c-label-active;
-  font-size: 16px;
+  color: $c-border-input;
+  font-size: 14px;
   margin-top: 5px;
 }
 
@@ -61,30 +53,21 @@ Form Label Component
 }
 
 .isOutline {
-  padding-left: 10px;
+  padding: 0 4px;
   top: 17px;
-}
-
-.isActive.isOutline, .isAutofilled.isOutline {
-  background: $white;
-  left: 5px;
-  padding: 0 5px;
-  top: -6px;
-  width: auto;
-}
-
-.has-iconRight {
-  label, input {
-    padding-right: 35px;
-  }
+  display: math;
 }
 
 .has-iconLeft {
-  label, input {
+  input {
     padding-left: 35px;
   }
 }
 
+.disabled {
+  color: #C7C7C7;
+}
+
 .iconRight, .iconLeft {
   pointer-events: none;
   position: absolute;
@@ -93,10 +76,12 @@ Form Label Component
 
 .iconRight {
   right: 12px;
+  top: 38px;
 }
 
 .iconLeft {
-  left: 12px;
+  left: 16px;
+  top: 38px;
 }
 
 .isClickable {

diff --git a/source/components/form/elements/form-control.styl b/source/components/form/elements/form-control.styl
@@ -6,7 +6,7 @@ Variables
 
 /* Border color
 ========================================================================== */
-$c-border = #a1a1a1;
+$c-border = #60605f;
 $c-check-border = #7F7F7F;
 /* Field
 ========================================================================== */
@@ -17,7 +17,9 @@ $c-text-default = #333;
 ========================================================================== */
 $c-addon-background = #18a689;
 $c-addon-border = $c-border;
-
+$c-border-hover = #3B3B3A;
+$c-label = #00A0b2;
+$c-disabled = #c7c7c7;
 /* ==========================================================================
 Placeholders
 ========================================================================== */
@@ -26,8 +28,8 @@ Placeholders
 $field {
   border: 0;
   border-bottom: 1px solid $c-border;
-  border-top-left-radius: 3px;
-  border-top-right-radius: 3px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
   display: block;
   font-size: inherit;
   height: 35px;
@@ -43,42 +45,44 @@ $field {
   }
 
   &:hover {
-    border-color: var(--c-support-dark);
-    color: var(--c-support-dark);
+    border-color: $c-border-hover;
+    color: $c-border-hover;
   }
 
   &:focus {
-    border-color: var(--c-active-input);
+    border-bottom: 1px solid $c-label;
     color: var(--c-support-dark);
   }
 
   &.isActive {
-    border-color: var(--c-active-input);
+    border-color: $c-gray-2 ;
   }
 
   &:disabled {
-    background: var(--c-back-disabled);
-    color: var(--c-text-disabled);
+    cursor: not-allowed;
+    background: white;
+    color: $c-disabled;
+    border-color: $c-disabled;
   }
 
   &:disabled::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: var(--c-text-disabled);
+    color: $c-disabled;
   }
 
   &:disabled:-ms-input-placeholder { /* Internet Explorer 10-11 */
-    color: var(--c-text-disabled);
+    color: $c-disabled;
   }
 
   &:disabled::-ms-input-placeholder { /* Microsoft Edge */
-    color: var(--c-text-disabled);
+    color: $c-disabled;
   }
 }
 
 /* Radio and checkbox
 ========================================================================== */
 $radioCheckbox {
   align-items: center;
-  border: 2px solid $c-check-border;
+  border: 2px solid $c-border;
   cursor: pointer;
   display: flex;
   height: 20px;
@@ -87,12 +91,12 @@ $radioCheckbox {
   width: 20px;
 
   &.isDisabled, &.isDisabled.isActive {
-    background:  var(--c-back-disabled);
-    border-color: var(--c-text-disabled);
+    background:  white;
+    border-color:$c-disabled;
     cursor: not-allowed;
 
     i {
-      color: var(--c-text-disabled);
+      color: $c-disabled;
     }
   }
 }
@@ -177,13 +181,13 @@ Form Control Component
 
   input[type='radio']:disabled {
     &:checked ~ .fakeInput {
-      background: var(--c-back-disabled);
-      border-color: var(--c-text-disabled);
+      background: white;
+      border-color: $c-disabled;
       cursor: not-allowed;
     }
 
     &:checked ~ .fakeInput:before {
-      background: var(--c-back-disabled);
+      background: white;
     }
   }
 }
@@ -268,9 +272,9 @@ Form Control Component
 }
 
 .form-addon--disabled {
-  background: var(--c-back-disabled);
-  border-color: var(--c-back-disabled);
-  color: var(--c-text-disabled);
+  background: white;
+  border-color: $c-disabled;
+  color: $c-disabled;
 }
 
 /* Feedback

diff --git a/source/components/form/form.stories.js b/source/components/form/form.stories.js
@@ -93,6 +93,16 @@ export const AA_InputText = withState({ input: 'Campo com valor default', check:
           />
           <FormHelpText>Versão outline!</FormHelpText>
         </FormGroup>
+        <FormGroup>
+          <FormControlLabel
+            outline
+            label="Nome"
+            placeholder="Form, FormGroup and input"
+            defaultValue="Valor default"
+            disabled
+          />
+          <FormHelpText>Versão disabled!</FormHelpText>
+        </FormGroup>
         <br />
         <FormGroup>
           <FormControlLabel