precyx
12/19/2019 - 8:40 AM

Styled Components Examples

Some styled components examples

import styled from "styled-components";
export const ButtonBar = styled.div`
  /** Sharepoint Reset: Buttons */
  input[type="button"],
  input[type="reset"],
  input[type="submit"],
  button {
    margin-left: auto;
  }
  margin-top: 15px;
  margin-bottom: 15px;
  > * {
    margin-right: 10px;
  }
`;
export const FilterContainer = styled.div`
  display: flex;
  flex-flow: wrap;
  max-width: 1000px;
`;
export const Filter = styled.div`
  margin-bottom: 5px;
  margin-right: 40px;
  .ms-Label {
    width: 180px;
  }
  .ms-TextField-wrapper,
  .ms-Dropdown-container {
    display: flex;
  }
  .ms-TextField-field,
  .ms-Dropdown {
    width: 200px;
  }
  /** Sharepoint Reset: Datepicker */
  .ms-DatePicker-picker {
    input,
    select,
    label,
    textarea,
    button,
    option {
      vertical-align: unset;
    }
  }
  /** Sharepoint Reset: Textfield */
  .ms-TextField {
    input[type="password"],
    input[type="text"],
    input[type="file"],
    select,
    textarea,
    .sp-peoplepicker-topLevel,
    .sp-peoplepicker-topLevelDisabled,
    .sp-peoplepicker-autoFillContainer,
    .ms-inputBox {
      border: none;
    }
  }
`;