stickerpicker/web/style/index.sass

// Copyright (c) 2020 Tulir Asokan
//
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at http://mozilla.org/MPL/2.0/.

*
  font-family: sans-serif

body
  margin: 0

h1
  font-size: 1rem

\:root
  --stickers-per-row: 4
  --sticker-size: calc(100vw / var(--stickers-per-row))

$nav-sticker-size: 12vw
$nav-bottom-highlight: 2px
$nav-height: calc(#{$nav-sticker-size} + #{$nav-bottom-highlight})
$nav-height-inverse: calc(-#{$nav-sticker-size} - #{$nav-bottom-highlight})

main
  &.spinner
    margin-top: 5rem

  &.error, &.empty
    margin: 2rem

  &.empty
    text-align: center

  &.has-content
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0

    display: grid
    grid-template-rows: $nav-height auto

nav
  display: flex
  overflow-x: auto

  height: $nav-height

  background-color: white

  > a
    border-bottom: $nav-bottom-highlight solid transparent
    &.visible
      border-bottom-color: green
    > div.sticker
      width: $nav-sticker-size
      height: $nav-sticker-size
    > div.sticker.icon > img
      width: 70%
      height: 70%
      padding: 15%

div.pack-list, nav
  scrollbar-width: none

  &::-webkit-scrollbar
    display: none

div.pack-list
  overflow-y: auto

div.pack-list.ios-safari-hack
  position: fixed
  top: $nav-height
  bottom: 0
  left: 0
  right: 0
  -webkit-overflow-scrolling: touch

section.stickerpack
  margin-top: .75rem

  > div.sticker-list
    display: flex
    flex-wrap: wrap

  > h1
    margin: 0 0 0 .75rem

div.sticker
  display: flex
  padding: 4px
  cursor: pointer
  position: relative
  width: var(--sticker-size)
  height: var(--sticker-size)
  box-sizing: border-box

  &:hover
    background-color: #eee

  > img
    display: none
    width: 100%
    object-fit: contain

    &.visible
      display: initial

div.settings-list
  display: flex
  flex-direction: column

  > *
    margin: .5rem

  button
    padding: .5rem
    border-radius: .25rem

  input
    width: 100%