com.phloxui/styles/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;

				&.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;
}