home.scss

@import "./common";
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
@import "@material/image-list/mdc-image-list";
@import "@material/ripple/mixins";
@import "@material/typography/mdc-typography";
@import "@material/elevation/mdc-elevation";
@import "@material/tab-bar/mdc-tab-bar";
@import "@material/tab-scroller/mdc-tab-scroller";
@import "@material/tab-indicator/mdc-tab-indicator";
@import "@material/tab/mdc-tab";
@import "@material/list/mdc-list";
@import "@material/menu-surface/mdc-menu-surface";
@import "@material/menu/mdc-menu";
@import "@material/select/mdc-select";
@import "@material/button/mdc-button";
@import "@material/textfield/mdc-text-field";
@import "@material/icon-button/mdc-icon-button";
@import "@material/snackbar/mdc-snackbar";

.demo-width-class {
  width: 170px;
  margin-right: 16px;
  margin-top: 10px;
  margin-bottom: 20px;
}

.select-container {
  margin: 10px 16px;
  .mdc-text-field {
    width: 450px;
  }
}

.type-scale-meta {
  display: flex;
  justify-content: space-between;
  transform: translateY(-1px);
  font-family: 'Roboto Mono';
  font-size: 12px;
  z-index: -1;
  opacity: 0;
  transition-duration: 0.15s;
  height: 0;
  align-items: center;
  width: 350px;

  .label {
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 4px;
  }

  div {
    display: flex;
    flex-direction: column;
  }
}

.font-radio {
  display: none;
}

.font-radio:checked + .font-option {
  background-color: #fefe8d;
  border-color: black;
}

.font-radio:checked .type-scale-variable {
  display: flex;
}

.expansion {
  display: none;
}

.expansion-radio {
  display: none;
}

.expansion-radio:checked + .type-scale-item .type-scale-meta {
  opacity: 1;
  transform: translateY(0);
  height: 42px;
}

.expansion-radio:checked + .type-scale-item {
  background: #fafafa;
}

.mdc-tab-bar {
  border-bottom: 1px solid #e0e0e0;
}

.selected-font {
  background-color: #fefe8d;
  border-color: black;
}

.product-list {
  @include mdc-image-list-masonry-columns(4);

  overflow: auto;
  padding: 80px 100px 0;

  .mdc-image-list__supporting {
    justify-content: center;
  }

  .mdc-image-list__item {
    padding: 10px;
  }

  .mdc-image-list__label {
    @include mdc-typography(subtitle2);
  }
}

.meta-drawer {
  width: 198px;
  border-left-width: 1px;
  border-left-style: solid;
  border-right: none;
  height: 100vh;
  overflow: hidden;

  .mdc-list {
    margin: 70px 5px auto 5px;
  }

  .mdc-list-item {
    border-radius: 6px;
    justify-content: center;
  }

  .mdc-text-field {
    width: 100%;
  }

  // This needs 3-class specificity to override MDC Drawer styles
  .mdc-list .mdc-list-item {
    @include mdc-states-activated(#fff);
  }

  .mdc-select {
    width: calc(200px - 32px);
    margin: 0 auto;
    display: block;
  }
}

.type-scale-container {
  display: block;
  overflow: auto;
}

.primary-font-header {
  display: inline-block;
  margin: 16px 0px 16px 16px;
  color: rgba(0, 0, 0, 0.87);
  font-size: 14px;
}

.font-header-container {
  display: flex;
  justify-content: space-between;
  padding-right: 0px;

  .info-icon {
    width: 18px;
    height: 18px;
    align-self: center;
    margin: 0 auto;
    color: lightgray;
  }

}

.or {
  margin: 0 0 10px 16px;
}

.tooltip {
  display: flex;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  margin-top: 2px;
}

/* Hover state and touch target for info icons */
.tooltip:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 284px;
  background-color: white;
  border: solid 1px lightgray;
  color: #3c4043;
  border-radius: 6px;
  padding: 20px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.25px;

  /* Position the tooltip */
  position: absolute;
  z-index: 100;
  margin-top: 48px;
  left: 462px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.primary-font {
  display: flex;
  flex-direction: row;
  margin: 0px 11px 10px;
  flex-flow: wrap;

  .font-option {
    width: 80px;
    height: 80px;
    text-align: center;
    margin: 5px;
    border: solid 1px lightgrey;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    flex-direction: column;

    &:hover {
      background-color: lightgrey;
    }
  }

  .font-option-spacer {
    flex-grow: 1;
  }

  .font-example {
    margin: auto;
    font-size: 23px;
    flex-grow: 1;
    display: inline-table;
  }

  .font-name {
    margin-bottom: 14px;
    font-size: 12px;
  }
}

.main-content {
  display: flex;
  height: calc(100% - 48px);
  position: relative;
  flex-direction: column;
  margin: 0 auto 0 0;
  margin-top: 48px;
  overflow-x: hidden;

  .type-scale-item {
    display: flex;
    flex-direction: column;
    min-height: 30px;
    padding: 12px 16px 12px 24px;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      background:#FAFAFA;
      outline: 1px solid #EEEEEE;
    }
  }

  .type-scale-variable {
    font-size: 14px;
    letter-spacing: 0;
    font-weight: normal;
    margin: 16px 0;
    color: rgba(0, 0, 0, 0.6);
  }

  .type-scale-example {
    display: flex;
    flex-direction: column;
    z-index: 2;

    .sentence {
      align-self: flex-start;
      white-space: nowrap;
      text-overflow: clip;
    }
  }
}

.top-bar {
  display: flex;
  width: 100%;
  height: 80px;
  border-bottom: lightgray 1px solid;
}

.top-bar-header {
  align-self: center;
  margin: 0 0 0 16px;
  width: 500px;
  font-size: 26px;
}

.top-bar-button {
  align-self: center;
}

.drawer-content-header {
  font-size: 14px;
  color: rgba(0, 0, 0, .80);
  padding: 18px 0 0 15px;
  height: 48px;
  display: block;
  border-bottom: 1px solid #e0e0e0;
}

.font-selection-section.second {
  margin-top: 55px;
}

.code-sample {
  font-family: 'Roboto Mono';
  padding: 0 1rem 1rem 0;
  font-size: 14px;
  line-height: 1.4;
  overflow: scroll;
}

.tab-content {
  width: 560px;
  padding-bottom: 1rem;
}

#code-content {
  display: none;
  padding: 24px 0 24px 24px;
  box-sizing: border-box;
}

.platform-instruction {
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-right: 24px;
  color: rgba(0, 0, 0, .80);
  font-size: 14px;
}


* { box-sizing: border-box; }
body {
  font: 16px 'Roboto';
}
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-flex;
  flex-direction: row;
  width: 168px;
  margin: 0 15px;
  background-color: #F5F5F5;
  height: 56px;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid;
  border-bottom-color: rgba(0, 0, 0, 0.42);
  cursor: pointer;
}
.autocomplete-input {
  outline: none;
  background-color: transparent;
  cursor: pointer;
}
.autocomplete-dropdown {
  align-self: center;
  color: #717171;
  margin: 0 10px 0 0;
  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  .path {
    fill: #717171;
  }

  &.flipped {
    transform: rotate(180deg);
  }
}
input {
  border: 1px solid transparent;
  // background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  // background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete-items,
.autocomplete2-items {
  background: white;
  max-height: 284px;
  overflow: scroll;
  position: absolute;
  border-radius: 4px;
  // border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1px;
  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);;
 
  :first-child {
    margin-top: 8px;
  }

  :last-child {
    margin-bottom: 8px;
  }

  &:before {
    content: "Sorted by popularity";
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 12px 0 -8px 16px;
    display: block;
    color: #909090;
  }

  // Empty state for matches
  &:empty:before {
    content: "No matches found";
    height: 30px;
  }
}

.autocomplete-items div {
  padding: 14px 16px;
  cursor: pointer;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  line-height: 20px;
}
.autocomplete-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}
.autocomplete-active,
.autocomplete2-active {
  /*when navigating through the items using the arrow keys:*/
  background-color: #E0E0E0 !important;
  color: #ffffff;
}

* { box-sizing: border-box; }
body {
  font: 16px 'Roboto';
}
.autocomplete2 {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-flex;
  flex-direction: row;
  width: 168px;
  margin: 0 15px;
  background-color: #F5F5F5;
  height: 56px;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid;
  border-bottom-color: rgba(0, 0, 0, 0.42);
  cursor: pointer;
}
.autocomplete2-input {
  outline: none;
  background-color: transparent;
  cursor: pointer;
}
.autocomplete2-dropdown {
  align-self: center;
  color: #717171;
  margin: 0 10px 0 0;
  transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  .path2 {
    fill: #717171;
  }

  &.flipped {
    transform: rotate(180deg);
  }
}
input {
  border: 1px solid transparent;
  // background-color: #f1f1f1;
  padding: 10px;
  font-size: 16px;
}
input[type=text] {
  // background-color: #f1f1f1;
  width: 100%;
}
input[type=submit] {
  background-color: DodgerBlue;
  color: #fff;
}
.autocomplete2-items {
  max-height: 284px;
  overflow: scroll;
  position: absolute;
  border-radius: 4px;
  // border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1px;
  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);;
  :first-child {
    margin-top: 8px;
  }
  :last-child {
    margin-bottom: 8px;
  }
}
.autocomplete2-items div {
  padding: 14px 16px;
  cursor: pointer;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.87);
  font-size: 16px;
  line-height: 20px;
}
.autocomplete2-items div:hover {
  /*when hovering an item:*/
  background-color: #e9e9e9;
}

.codeTabActions {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.main-tabs {
  background-color: white;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 560px;
  height: 48px;
}

button.copyBtn {
  left: -12px;
}

.google-fonts-callout {
  padding: 16px;
  display: flex;
  flex-direction: column;
  position: absolute;
  bottom: 0;
}

.google-fonts-logo {
  font-size: 14px;
  background-image: url(/gflogo.svg);
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 28px;
  line-height: 20px;
}

.google-fonts-link {
  display: flex;
  justify-content: space-between;
}

.google-fonts-copy {
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
  margin-top: 8px;
}

.mdc-drawer__content {
  overflow-x: hidden;
}