phoenix-components-library/react/components/Input/Input.css

Component library for Phoenix Frontend Projects.

@charset "UTF-8";
.es-input label {
  position: absolute;
  left: 14px;
  top: 7px;
  color: #bec2c2;
  transition: 0.2s ease all;
  z-index: 2;
  background: #fff; }

.es-input, .es-input-focused {
  position: relative;
  width: 100%; }

.es-input input,
.es-input select {
  position: relative;
  padding: 0 30px 0 14px;
  color: #525b5d;
  border: solid 1px #bec2c2;
  border-radius: 2px;
  height: 32px;
  width: 100%;
  line-height: 33px;
  background-color: rgba(0, 0, 0, 0);
  z-index: 3;
  margin-bottom: 18px; }

.es-input input:focus,
.es-input select:focus, .es-input-focused input, .es-input-focused select {
  border: solid 1px #6db749;
  z-index: 1; }

.es-input input:focus + label.es-label,
.es-input select:focus + label.es-label, .es-input input:focus + label.es-input-label,
.es-input select:focus + label.es-input-label, .es-input label.es-label-full, .es-input-focused label {
  top: -8px;
  padding: 0px 3px;
  font-size: 12px;
  color: #6db749; }

.es-icon-copy:before,
.es-icon-copy, .es-icon-success:before,
.es-icon-success, .es-icon-notification:before,
.es-icon-notification, .es-icon-alarm:before,
.es-icon-alarm, .es-icon-archive:before,
.es-icon-archive, .es-icon-circle-arrow-down:before,
.es-icon-circle-arrow-down, .es-icon-circle-arrow-up:before,
.es-icon-circle-arrow-up, .es-icon-close-circle:before,
.es-icon-close-circle, .es-icon-add-folder:before,
.es-icon-add-folder, .es-icon-clock:before,
.es-icon-clock, .es-icon-down-arrow:before,
.es-icon-down-arrow, .es-icon-download:before,
.es-icon-download, .es-icon-enter:before,
.es-icon-enter, .es-icon-left-arrow:before,
.es-icon-left-arrow, .es-icon-right-arrow:before,
.es-icon-right-arrow, .es-icon-up-arrow:before,
.es-icon-up-arrow, .es-icon-upload:before,
.es-icon-upload, .es-icon-users:before,
.es-icon-users, .es-icon-cog:before,
.es-icon-cog, .es-icon-switch:before,
.es-icon-switch, .es-icon-ad:before,
.es-icon-ad, .es-icon-add-circle:before,
.es-icon-add-circle, .es-icon-arrow-down:before,
.es-icon-arrow-down, .es-icon-arrow-up-down:before, .es-select-icon:before,
.es-icon-arrow-up-down, .es-icon-arrow-up:before,
.es-icon-arrow-up, .es-icon-campaign:before,
.es-icon-campaign, .es-icon-cards-view:before,
.es-icon-cards-view, .es-icon-delete:before,
.es-icon-delete, .es-icon-duplicate:before,
.es-icon-duplicate, .es-icon-eye:before,
.es-icon-eye, .es-icon-facebook:before,
.es-icon-facebook, .es-icon-instagram:before,
.es-icon-instagram, .es-icon-link:before,
.es-icon-link, .es-icon-list-view:before,
.es-icon-list-view, .es-icon-logo:before,
.es-icon-logo, .es-icon-pencil:before,
.es-icon-pencil, .es-icon-remove-circle:before,
.es-icon-remove-circle, .es-icon-search:before, .es-search:before,
.es-icon-search, .es-icon-snapchat:before,
.es-icon-snapchat, .es-icon-square-minus:before,
.es-icon-square-minus, .es-icon-square-plus:before,
.es-icon-square-plus, .es-icon-star:before,
.es-icon-star, .es-icon-tumblr:before,
.es-icon-tumblr, .es-icon-twitter:before,
.es-icon-twitter, .es-icon-close:before,
.es-icon-close {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "eli" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.es-icon {
  font-size: 15px; }

.es-icon-copy:before,
.es-icon-copy {
  content: ""; }

.es-icon-success:before,
.es-icon-success {
  content: ""; }

.es-icon-notification:before,
.es-icon-notification {
  content: ""; }

.es-icon-alarm:before,
.es-icon-alarm {
  content: ""; }

.es-icon-archive:before,
.es-icon-archive {
  content: ""; }

.es-icon-circle-arrow-down:before,
.es-icon-circle-arrow-down {
  content: ""; }

.es-icon-circle-arrow-up:before,
.es-icon-circle-arrow-up {
  content: ""; }

.es-icon-close-circle:before,
.es-icon-close-circle {
  content: ""; }

.es-icon-add-folder:before,
.es-icon-add-folder {
  content: ""; }

.es-icon-clock:before,
.es-icon-clock {
  content: ""; }

.es-icon-down-arrow:before,
.es-icon-down-arrow {
  content: ""; }

.es-icon-download:before,
.es-icon-download {
  content: ""; }

.es-icon-enter:before,
.es-icon-enter {
  content: ""; }

.es-icon-left-arrow:before,
.es-icon-left-arrow {
  content: ""; }

.es-icon-right-arrow:before,
.es-icon-right-arrow {
  content: ""; }

.es-icon-up-arrow:before,
.es-icon-up-arrow {
  content: ""; }

.es-icon-upload:before,
.es-icon-upload {
  content: ""; }

.es-icon-users:before,
.es-icon-users {
  content: ""; }

.es-icon-cog:before,
.es-icon-cog {
  content: ""; }

.es-icon-switch:before,
.es-icon-switch {
  content: ""; }

.es-icon-ad:before,
.es-icon-ad {
  content: ""; }

.es-icon-add-circle:before,
.es-icon-add-circle {
  content: ""; }

.es-icon-arrow-down:before,
.es-icon-arrow-down {
  content: ""; }

.es-icon-arrow-up-down:before, .es-select-icon:before,
.es-icon-arrow-up-down,
.es-select-icon:before {
  content: ""; }

.es-icon-arrow-up:before,
.es-icon-arrow-up {
  content: ""; }

.es-icon-campaign:before,
.es-icon-campaign {
  content: ""; }

.es-icon-cards-view:before,
.es-icon-cards-view {
  content: ""; }

.es-icon-delete:before,
.es-icon-delete {
  content: ""; }

.es-icon-duplicate:before,
.es-icon-duplicate {
  content: ""; }

.es-icon-eye:before,
.es-icon-eye {
  content: ""; }

.es-icon-facebook:before,
.es-icon-facebook {
  content: ""; }

.es-icon-instagram:before,
.es-icon-instagram {
  content: ""; }

.es-icon-link:before,
.es-icon-link {
  content: ""; }

.es-icon-list-view:before,
.es-icon-list-view {
  content: ""; }

.es-icon-logo:before,
.es-icon-logo {
  content: ""; }

.es-icon-pencil:before,
.es-icon-pencil {
  content: ""; }

.es-icon-remove-circle:before,
.es-icon-remove-circle {
  content: ""; }

.es-icon-search:before, .es-search:before,
.es-icon-search,
.es-search:before {
  content: ""; }

.es-icon-snapchat:before,
.es-icon-snapchat {
  content: ""; }

.es-icon-square-minus:before,
.es-icon-square-minus {
  content: ""; }

.es-icon-square-plus:before,
.es-icon-square-plus {
  content: ""; }

.es-icon-star:before,
.es-icon-star {
  content: ""; }

.es-icon-tumblr:before,
.es-icon-tumblr {
  content: ""; }

.es-icon-twitter:before,
.es-icon-twitter {
  content: ""; }

.es-icon-close:before,
.es-icon-close {
  content: ""; }

.es-input label.grey {
  background: #f3f4f4; }

.es-input label.es-label-full {
  color: #bec2c2;
  z-index: 4; }

.es-search:before {
  font-size: 16px;
  color: #6db749;
  position: absolute;
  right: 10px;
  top: 8px; }

.es-select-icon:before {
  font-size: 10px;
  color: #6db749;
  position: absolute;
  right: 10px;
  top: 12px; }