alterando visual dos inputs e do select

feat: alterando visual dos inputs
b2wads · Aug 31, 2023 · b6a2bd3 · b6a2bd3
2 parents f4efc75 + 1b31947
commit b6a2bd3
Show file tree

Hide file tree

Showing 10 changed files with 223 additions and 191 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@b2wads/grimorio-ui",
   "sideEffects": false,
-  "version": "10.1.7",
+  "version": "10.1.8-beta",
   "description": "UI just like magic",
   "main": "lib/index.js",
   "repository": "https://github.com/b2wads/grimorio-ui",

diff --git a/source/components/form/elements/form-actions.js b/source/components/form/elements/form-actions.js
@@ -1,34 +1,26 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-// styles
 import styles from '../form.styl';
 
-class FormActions extends PureComponent {
-  constructor(props, context) {
-    super(props, context);
-  }
+const FormActions = ({ children, className }) => {
+  const fullClassName = classNames(className, styles['form-group-actions']);
 
-  static defaultProps = {
-    children: undefined,
-    className: undefined,
-  };
+  return (
+    <div className={fullClassName}>
+      {children}
+    </div>
+  );
+};
 
-  static propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  };
+FormActions.defaultProps = {
+  children: undefined,
+  className: undefined,
+};
 
-  render() {
-    const { children, className } = this.props;
-    const fullClassName = classNames(className, styles['form-group-actions']);
-
-    return (
-      <div className={fullClassName}>
-        {children}
-      </div>
-    );
-  }
-}
+FormActions.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
 
 export default FormActions;
diff --git a/source/components/form/elements/form-control-label.js b/source/components/form/elements/form-control-label.js
@@ -33,6 +33,7 @@ class FormControlLabel extends Component {
   static propTypes = {
     label: PropTypes.string,
     labelHighLight: PropTypes.bool,
+    disabled: PropTypes.bool,
     placeholder: PropTypes.string,
     activeLabel: PropTypes.bool,
     onBlur: PropTypes.func,
@@ -93,6 +94,7 @@ class FormControlLabel extends Component {
       iconLeft,
       iconLeftClick,
       context,
+      disabled,
       ...rest
     } = this.props;
 
@@ -111,6 +113,7 @@ class FormControlLabel extends Component {
       [styles.isAutofilled]: this.state.isAutofilled,
       [styles[`has-${validationState}`]]: validationState,
       [styles.isOutline]: this.props.outline,
+      [styles.disabled]: disabled,
     });
 
     const inputClasses = classNames(styles.formControl, {
@@ -148,6 +151,7 @@ class FormControlLabel extends Component {
             onHover={this.onHoverLabel}
             onBlur={this.onBlurLabel}
             checkIsAutofilled={this.checkIsAutofilled}
+            disabled={disabled}
           />
           {typeof iconRight === 'string'
             ? <Icon className={iconRightClasses} name={iconRight} size={18} onClick={iconRightClick} />

diff --git a/source/components/form/elements/form-control-label.styl b/source/components/form/elements/form-control-label.styl
@@ -3,9 +3,11 @@ Variables
 ========================================================================== */
 /* Color
 ========================================================================== */
-$c-label = #A1A1A1;
+$c-label = #00A0b2;
 $c-label-active = #878786;
 $c-text-default = #333;
+$c-border-input = #60605f;
+$c-disabled = #c7c7c7;
 
 /* ==========================================================================
 Form Label Component
@@ -15,36 +17,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 +54,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: $c-disabled;
+}
+
 .iconRight, .iconLeft {
   pointer-events: none;
   position: absolute;
@@ -93,10 +77,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;
     }
   }
 }
@@ -139,6 +143,12 @@ Form Control Component
   border-radius: 3px;
   margin-top: 0;
   padding: 24px 10px 22px;
+
+    &:focus {
+    outline: 1px solid $c-label;
+    border-color: $c-label;
+    color: var(--c-support-dark);
+  }
 }
 
 .form-field--select {
@@ -177,13 +187,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 +278,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