preact-material-design/dist/styles.css

A set of material components for Preact.

.pmd-button {
  display: inline-block;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: white; }
  .pmd-button__inner {
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    border-radius: 2px;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    background: #2196F3; }
  .pmd-button--dense {
    padding: 0 4px; }
    .pmd-button--dense .pmd-button__inner {
      height: 32px;
      line-height: 32px;
      font-size: 13px; }
  .pmd-button--flat {
    padding-left: 8px;
    padding-right: 8px;
    color: #2196F3; }
    .pmd-button--flat .pmd-button__inner {
      background: transparent;
      transition: 280ms background cubic-bezier(0.4, 0, 0.2, 1);
      padding: 0 8px;
      min-width: 64px; }
    .pmd-button--flat.pmd-button--disabled {
      pointer-events: none;
      color: rgba(0, 0, 0, 0.26); }
  .pmd-button:focus {
    outline: 0; }
  .pmd-button:not(.pmd-button--flat).pmd-button--disabled {
    pointer-events: none;
    color: rgba(0, 0, 0, 0.26); }
    .pmd-button:not(.pmd-button--flat).pmd-button--disabled .pmd-button__inner {
      background: rgba(0, 0, 0, 0.12); }
  .pmd-button:not(.pmd-button--flat) .pmd-button__inner {
    transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), 280ms background cubic-bezier(0.4, 0, 0.2, 1); }
  .pmd-button:not(.pmd-button--flat):hover .pmd-button__inner {
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12); }
  .pmd-button:not(.pmd-button--flat):active .pmd-button__inner {
    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }

.pmd-card-header {
  height: 72px;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  align-items: center; }
  .pmd-card-header__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 16px; }
  .pmd-card-header__titles h1, .pmd-card-header__titles h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 500; }
  .pmd-card-header__titles h2 {
    color: rgba(0, 0, 0, 0.57); }

.pmd-card {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  background: white;
  border-radius: 2px;
  overflow: hidden;
  width: 400px; }
  .pmd-card--includes-padding + .pmd-card--includes-padding {
    padding-top: 0; }
  .pmd-card-media > * {
    width: 100%; }
  .pmd-card-text {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    line-height: 24px;
    padding: 16px;
    margin: 0; }
  .pmd-card-title {
    font-size: 24px;
    font-weight: normal;
    font-family: "Roboto", sans-serif;
    padding: 16px;
    padding-top: 24px;
    margin: 0; }
    .pmd-card-title + .pmd-card-subtitle {
      margin-top: -14px;
      padding-top: 0; }
  .pmd-card-subtitle {
    font-size: 14px;
    font-weight: normal;
    font-family: "Roboto", sans-serif;
    color: rgba(0, 0, 0, 0.57);
    padding: 16px;
    margin: 0; }
  .pmd-card-actions {
    display: flex; }
    .pmd-card-actions--vertical {
      flex-direction: column;
      align-items: flex-start; }
  .pmd-card-media-area {
    display: flex; }
    .pmd-card-media-area__content {
      flex: 1 1 auto; }
    .pmd-card-media-area__media {
      margin-top: 16px;
      margin-right: 16px; }

.pmd-chip {
  background: rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  align-items: center;
  height: 32px;
  border-radius: 32px; }
  .pmd-chip img {
    border-radius: 50%;
    width: 32px;
    height: 32px; }
    .pmd-chip img + .pmd-chip__text {
      padding-left: 8px; }
  .pmd-chip__text {
    padding: 0 12px; }
  .pmd-chip + .pmd-chip {
    margin-left: 8px; }

.pmd-content {
  max-width: 1264px;
  padding: 16px;
  margin: 0 auto; }

.pmd-dialog-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  animation: 300ms fadeIn forwards cubic-bezier(0, 0, 0.2, 1); }

.pmd-dialog {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  background: white;
  max-height: calc(100vh - 48px);
  max-width: calc(100vw - 48px); }
  @media (max-width: 600px) {
    .pmd-dialog {
      max-height: 100vh;
      max-width: 100vw; } }
  .pmd-dialog--includes-padding + .pmd-dialog--includes-padding {
    padding-top: 0; }
  .pmd-dialog-title {
    font-size: 24px;
    font-weight: normal;
    font-family: "Roboto", sans-serif;
    padding: 24px;
    padding-bottom: 20px; }
  .pmd-dialog-content {
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    line-height: 24px;
    padding: 24px; }
  .pmd-dialog-actions {
    display: flex;
    justify-content: flex-end;
    padding-left: 24px; }
    .pmd-dialog-actions .pmd-button + .pmd-button {
      padding-left: 0; }
    .pmd-dialog-actions--vertical {
      flex-direction: column;
      align-items: flex-start; }

@keyframes fadeIn {
  from {
    opacity: 0; }
  to {
    opacity: 1; } }

.pmd-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
  color: rgba(0, 0, 0, 0.54); }
  .pmd-icon.pmd-icon--size-normal {
    font-size: 24px; }
    .pmd-icon.pmd-icon--size-normal:not(.pmd-icon--no-clearance) {
      padding: 12px; }
  .pmd-icon.pmd-icon--size-dense {
    font-size: 20px; }
    .pmd-icon.pmd-icon--size-dense:not(.pmd-icon--no-clearance) {
      padding: 10px; }

.pmd-toolbar--app {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
  background: #2196F3;
  color: white;
  height: 64px;
  line-height: 64px;
  padding: 0 24px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 500; }

.pmd-textfield {
  position: relative;
  display: block;
  height: 72px; }
  .pmd-textfield__label {
    display: block;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.38);
    position: absolute;
    top: 36px;
    left: 0;
    right: 0;
    pointer-events: none;
    transform: translateY(0) scale(1);
    transform-origin: left;
    transition: transform cubic-bezier(0.4, 0, 0.2, 1) 0.2s, color cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
    .pmd-textfield__label--floating {
      transform: translateY(-22px) scale(0.75); }
  .pmd-textfield__input {
    display: block;
    background: transparent;
    border: 0;
    font-size: 16px;
    width: 100%;
    color: rgba(0, 0, 0, 0.87);
    position: relative;
    top: 38px; }
    .pmd-textfield__input:focus {
      outline: 0; }
  .pmd-textfield__underline {
    display: block;
    position: absolute;
    top: 63px;
    left: 0;
    right: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
    .pmd-textfield__underline::after {
      content: '';
      display: block;
      position: relative;
      top: 2px;
      height: 2px;
      background: #2196F3;
      opacity: 0;
      transition: opacity cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
  .pmd-textfield:hover .pmd-textfield__label {
    color: rgba(0, 0, 0, 0.54); }
  .pmd-textfield--focused .pmd-textfield__label {
    color: #2196F3 !important; }
  .pmd-textfield--focused .pmd-textfield__underline::after {
    opacity: 1; }
  .pmd-textfield--disabled {
    pointer-events: none; }
    .pmd-textfield--disabled .pmd-textfield__input {
      color: rgba(0, 0, 0, 0.38); }
    .pmd-textfield--disabled .pmd-textfield__underline {
      border-bottom-style: dashed; }

.pmd-type--display-4 {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 112px; }

.pmd-type--display-3 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 56px; }

.pmd-type--display-2 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 45px; }

.pmd-type--display-1 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 34px; }

.pmd-type--headline {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 24px; }

.pmd-type--title {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px; }

.pmd-type--subheading {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px; }

.pmd-type--body-2 {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 13px; }

.pmd-type--body-1 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px; }

.pmd-type--caption {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px; }