com.phloxui/styles/lib/theme/material/component/material-component.less

PhloxUI Ng2+ Framework

// Select all parent elements having class name prefix: material-*.

[class^="material-"],
[class*=" material-"] {
	// All <input>s within material-* components.
	input {
		// 	// <input type="text | password">
		// 	&[type="text"],
		// 	&[type="password"] {
		&.form-control {
			// .phlox-transition();
			border-radius: 0;
			border-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH;
			border-right: 0;
			border-left: 0;
			border-top: 0;
			box-shadow: none;
			border-color: @MATERIAL_BORDER_COLOR;
			padding: 0;
			margin: 0;
			background: none;
			height: unset;

			&.dirty {
				font-style: italic;
			}

			&.focus,
			&:focus {
				box-shadow: none;
				// border-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS;
				// border-color: @MATERIAL_BORDER_COLOR_FOCUS;
			}

			&.success {
				border-color: @MATERIAL_BORDER_COLOR_SUCCESS;
			}

			&.warning {
				border-color: @MATERIAL_BORDER_COLOR_WARNING;
			}

			&.error {
				border-color: @MATERIAL_BORDER_COLOR_ERROR;
			}

			&[disabled],
			&[readonly] {
				cursor: default;
				// color: @MATERIAL_DISABLED_FONT;
				// background-color: @MATERIAL_DISABLED_BG_COLOR;
				// border-style: dotted;
			}
		}
	}

  textarea {
    &.form-control {
      // .phlox-transition();
			border-radius: 0;
			border-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH;
			border-right: 0;
			border-left: 0;
			border-top: 0;
			box-shadow: none;
			border-color: @MATERIAL_BORDER_COLOR;
			padding: 0;
			margin: 0;
			background: none;

      &.dirty {
        font-style: italic;
      }

			&.focus,
			&:focus {
				box-shadow: none;
				// border-width: @MATERIAL_FORM_CONTROL_TEXT_BORDER_WIDTH_FOCUS;
				// border-color: @MATERIAL_BORDER_COLOR_FOCUS;
			}

      &.success {
        border-color: @MATERIAL_BORDER_COLOR_SUCCESS;
      }

      &.warning {
        border-color: @MATERIAL_BORDER_COLOR_WARNING;
      }

      &.error {
        border-color: @MATERIAL_BORDER_COLOR_ERROR;
      }

			&[disabled],
			&[readonly] {
				cursor: default;
				// color: @MATERIAL_DISABLED_FONT;
				// background-color: @MATERIAL_DISABLED_BG_COLOR;
				// border-style: dotted;
			}
    }
  }

	.description,
	.validation {
		.phlox-transition();
		.FC0L();
		color: @MATERIAL_FORM_CONTROL_FONT_COLOR_NORMAL;

		&.success {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
		}

		&.warning {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
		}

		&.error {
			color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
		}
	}

	.help {
		.phlox-transition();
		.FC0L();
		color: @MATERIAL_FORM_CONTROL_FONT_COLOR_HELP;
	}
}

.material-input {
	// opacity: 0;
	transition: opacity 1.5s;
}