@lcf.vs/css-ui/components/header/popdown/popdown.css

A pure CSS base to make a responsive user interface

/* {"name":"css-ui","version":"3.0.7","author":"Lcf.vs <michael.rouges@gmail.com>","license":"MIT"} */
body > header > ol {
  float: right;
  height: 100%
}

body > header > ol > li {
  display: inline-block;
  width: var(--css-ui--header-height);
  height: var(--css-ui--header-height);
  float: left
}

body > header > ol > li > a {
  color: var(--css-ui--header--popdown-color);
  position: absolute;
  display: block;
  text-align: center;
  z-index: 1;
  width: var(--css-ui--header-height);
  line-height: var(--css-ui--header-height);
  top: 0
}

body > header > ol > li > a:first-of-type,
body > header > ol > li > a:first-of-type:focus ~ p,
body > header > ol > li > a:first-of-type:focus ~ a {
  z-index: 2
}

body > header > ol > li > ol,
body > header > ol > li > a ~ p {
  width: var(--css-ui--header--popdown-width);
  overflow-x: hidden;
  line-height: var(--css-ui--header-height);
  top: var(--css-ui--header-height);
  position: absolute;
  margin-left: calc(-1 * var(--css-ui--header--popdown-width) + var(--css-ui--header-height));
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .2s .2s
}

body > header > ol > li > ol {
  text-align: right
}

body > header > ol > li > ol > li,
body > header > ol > li > a ~ p {
  background: var(--css-ui--header--popdown-item-bg);
  text-align: justify
}

body > header > ol > li > ol > li,
body > header > ol > li > p {
  overflow-x: hidden;
  top: 0;
  padding: 0 var(--css-ui--padding) 0 var(--css-ui--padding)
}

body > header > ol > li > a:focus + p,
body > header > ol > li > a:focus + ol:empty + p,
body > header > ol > li > a:focus + ol:not(:empty) {
  max-height: calc(100vh - var(--css-ui--header-height) - var(--css-ui--padding));
  transform: scaleY(1)
}

body > header > ol > li {
  counter-reset: items
}

body > header > ol > li > ol > li {
  counter-increment: items
}

body > header > ol > li > a:not(:focus) + ol:not(:empty) ~ a::after {
  content: counter(items);
  color: var(--css-ui--header--popdown-counter-color);
  background: var(--css-ui--header--popdown-counter-bg);
  font-size: var(--css-ui--header--popdown-counter-font-size);
  padding: var(--css-ui--header--popdown-counter-padding);
  line-height: calc(var(--css-ui--header--popdown-counter-font-size) - var(--css-ui--header--popdown-counter-padding));
  border-radius: var(--css-ui--header--popdown-counter-padding);;
  position: absolute;
  display: inline-block;
  vertical-align: super;
  top: var(--css-ui--padding);
  margin-left: calc(-1 * var(--css-ui--padding));
  z-index: 2
}

@media (prefers-reduced-motion: reduce) {
  body > header > ol > li > ol,
  body > header > ol > li > a ~ p {
    transition: none
  }
}