How to use the frontity.styled.input function in frontity

To help you get started, weโ€™ve selected a few frontity examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github frontity / frontity / packages / twenty-twenty-theme / src / components / search-form.js View on Github external
display: flex;
  flex-wrap: nowrap;
  margin: 0 0 -0.8rem -0.8rem;
  justify-content: center;
  margin-top: 3rem;
`;

const Label = styled.label`
  align-items: stretch;
  display: flex;
  font-size: inherit;
  margin: 0;
  width: 100%;
`;

const Input = styled.input`
  background: #fff;
  border-radius: 0;
  border-style: solid;
  border-color: #dcd7ca;
  border-width: 0.1rem;
  box-shadow: none;
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  max-width: 100%;
  padding: 1.5rem 1.8rem;
  width: 100%;
  margin: 0 0 0.8rem 0.8rem;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
github frontity / frontity / packages / twentytwenty-theme / src / components / search / search-modal.js View on Github external
const SearchForm = styled.form`
  margin: 0;
  position: relative;
  width: 100%;
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;

  @media (min-width: 700px) {
    position: relative;
    width: 100%;
  }
`;

const SearchInput = styled.input`
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: 2rem;
  letter-spacing: -0.0277em;
  height: 8.4rem;
  margin: 0 0 0 -2rem;
  max-width: calc(100% + 2rem);
  padding: 0 0 0 2rem;
  width: calc(100% + 2rem);
  appearance: none;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
github frontity / frontity / packages / twenty-twenty-theme / src / components / search-modal.js View on Github external
const SearchForm = styled.form`
  margin: 0;
  position: relative;
  width: 100%;
  align-items: stretch;
  display: flex;
  flex-wrap: nowrap;

  @media (min-width: 700px) {
    position: relative;
    width: 100%;
  }
`;

const SearchInput = styled.input`
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  display: block;
  font-size: 2rem;
  letter-spacing: -0.0277em;
  height: 8.4rem;
  margin: 0 0 0 -2rem;
  max-width: calc(100% + 2rem);
  padding: 0 0 0 2rem;
  width: calc(100% + 2rem);
  appearance: none;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
github frontity / frontity / packages / twentytwenty-theme / src / components / styles / input.js View on Github external
import { styled } from "frontity";

const Input = styled.input`
  background: #fff;
  border-radius: 0;
  border-style: solid;
  border-color: #dcd7ca;
  border-width: 0.1rem;
  box-shadow: none;
  display: block;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  max-width: 100%;
  padding: 1.5rem 1.8rem;
  width: 100%;

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,