@postnord/web-components/collection/components/navigation/pn-tile/pn-tile.css

PostNord Web Components

/* Global utility variables */
/* Input styles */
/* Transition variables */
pn-tile {
  position: relative;
  font-size: 1em;
  /*---------------------------HIDDEN LINK ELEMENT-------------------------------*/
  /*---------------------------/HIDDEN LINK ELEMENT-------------------------------*/
  /*---------------------------TILE/CARD STYLES-------------------------------*/
  /*---------------------------/TILE/CARD STYLES-------------------------------*/
  /*----------------------MISC (circle, ripple effect)-------------------------*/
  /*--------------------------------/MISC-----------------------------------*/
}
pn-tile a.pn-tile-link {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  pointer-events: none;
  opacity: 0;
}
pn-tile .pn-tile {
  border: 0.1rem solid #d3cecb;
  outline: none;
  background: #ffffff;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  padding: 1.5em;
  padding: min(7%, 1.5em);
  word-break: break-word;
  text-decoration: none;
  border-radius: 0.8rem;
  transition: box-shadow 0.1s cubic-bezier(0.6, 0, 0.2, 1) 0.1s, background 0.2s linear, border 0.1s linear;
  position: relative;
  overflow: hidden;
  text-align: left;
  user-select: text;
  height: 100%;
}
pn-tile .pn-tile.vertical, pn-tile .pn-tile.simple {
  text-align: center;
}
pn-tile .pn-tile.vertical h3, pn-tile .pn-tile.simple h3 {
  font-size: 1.5em;
  font-size: clamp(1em, var(--w) * 1.4, 1.5em);
}
pn-tile .pn-tile.vertical .tile-slot, pn-tile .pn-tile.simple .tile-slot {
  font-size: 1em;
  font-size: clamp(1.2rem, var(--w), 1em);
}
pn-tile .pn-tile.vertical > *, pn-tile .pn-tile.simple > * {
  margin: 0.5em 0;
}
pn-tile .pn-tile.simple {
  flex-direction: column;
  align-items: center;
}
pn-tile .pn-tile.simple .tile-slot {
  display: none;
}
pn-tile .pn-tile.simple h3 > pn-icon {
  margin-left: 0.1em;
  vertical-align: bottom;
}
pn-tile .pn-tile.simple > * {
  margin: 0.5em;
}
pn-tile .pn-tile.simple > .text-cont {
  margin: 0.5em;
}
pn-tile .pn-tile.simple > svg,
pn-tile .pn-tile.simple > .tile-illustration-slot {
  max-width: clamp(3em, 70%, 10em);
}
pn-tile .pn-tile.simple > svg,
pn-tile .pn-tile.simple > .tile-illustration-slot,
pn-tile .pn-tile.simple > .text-cont {
  flex: auto;
}
pn-tile .pn-tile.horizontal {
  flex-wrap: nowrap;
}
pn-tile .pn-tile > * {
  margin: 0.5em;
  z-index: 2;
}
pn-tile .pn-tile > svg,
pn-tile .pn-tile > .tile-illustration-slot {
  width: 100%;
  max-width: 8em;
  flex: 0.5 3 calc((32rem - 100%) * 999);
  z-index: 2;
}
pn-tile .pn-tile > .tile-illustration-slot {
  max-width: 13em;
}
pn-tile .pn-tile > .tile-illustration-slot > * {
  width: 100%;
  display: block;
}
pn-tile .pn-tile > .text-cont {
  flex: 1 1 calc((32rem - 100%) * 999);
}
pn-tile .pn-tile > .text-cont.horizontal {
  flex: 1 1 0;
}
pn-tile .pn-tile > .text-cont.horizontal > h3 {
  white-space: nowrap;
}
pn-tile .pn-tile h3 {
  color: #005d92;
  font-size: 1.5em;
}
pn-tile .pn-tile .tile-slot {
  color: #5e554a;
  margin-top: 0.25em;
}
pn-tile a:focus-visible + .pn-tile {
  box-shadow: 0 0 0 0.3rem #ffffff, 0 0 0 0.6rem #005d92;
}
pn-tile .pn-tile:hover, pn-tile a:focus-visible + .pn-tile {
  background: #effbff;
  border: 0.1rem solid #8eddf9;
}
pn-tile .pn-tile:hover.vertical .tile-circle, pn-tile .pn-tile:hover.simple .tile-circle, pn-tile a:focus-visible + .pn-tile.vertical .tile-circle, pn-tile a:focus-visible + .pn-tile.simple .tile-circle {
  transform: translate(-50%, -90%);
  transform: translate(-50%, calc(var(--w) * 2 - 90%));
  opacity: 1;
}
pn-tile .pn-tile .tile-circle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40em;
  height: 40em;
  margin: 0;
  background-color: #005d92;
  border-radius: 50%;
  z-index: 1;
  transform: translate(-50%, -100%);
  transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1), opacity 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  opacity: 0;
}
pn-tile .pn-ripple {
  animation: ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);
  position: absolute;
  border-radius: 50%;
  background: #005d92;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.05;
}
@keyframes ripple {
  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}