BrowserInterstitialInstructions.scss 1.26 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
@import 'src/styles/common';

$columnWidth: 230px;
$columnGap: 60px;
$rowGap: 60px;
$leftMargin: 40px;

.instructionsPanel {
  display: flex;
  background-color: $light-grey;
  min-height: 235px;
  padding: 29px $global-padding-left;
  box-shadow: 0 3px 5px $global-box-shadow;
}

.instructionsWrapper {
  margin-left: $leftMargin;
  display: grid;
  grid-template-columns: repeat(4, #{$columnWidth});
  grid-column-gap: $columnGap;
  grid-row-gap: $rowGap;
  max-width: calc(4 * #{$columnWidth} + 3 * #{$columnGap});
}

.description {
  margin: 25px 40px;
  display: flex;
  align-items: center;

  .iconLabel {
    margin-left: 12px;
  }
}

.imageButtonIcon {
  width: 32px;
  height: 32px;
  background-color: $dark-grey;

  svg {
    fill: $white;
  }
}

.searchButtonIcon {
  width: 30px;
  height: 30px;

  svg {
    fill: $dark-grey;
  }
}

.searchDescription {
  margin: 14px 36px;
  color: $dark-grey;

  .exampleText {
    margin: 10px 4px;
  }
}

.speciesSelectorButton {
  margin-left: 40px;
  align-self: start;
  justify-self: start;
}


@media (max-width: 2 * $global-padding-left + $leftMargin + 4 * $columnWidth + 3 * $columnGap) {

  .instructionsWrapper {
    grid-template-columns: repeat(2, #{$columnWidth});
  }
  .speciesSelectorButton {
    margin-left: 0;
  }
}