zarm/lib/grid/style/index.css

基于 React 的移动端UI库

.za-grid {
  --border-color: var(--za-grid-border-color, var(--za-border-color));
  --item-background: var(--za-grid-item-background, var(--za-background-color));
  --item-active-background: var(--za-grid-item-active-background, var(--za-background-active));
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.za-grid--bordered:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-top-width: 1PX;
  /* prettier-ignore */
  border-left-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-grid--bordered:after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-grid--bordered:after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-grid--bordered::after {
  z-index: 1;
}
.za-grid--bordered .za-grid-item .za-grid-item__content:after {
  content: "";
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 0;
  border: 0 solid var(--border-color);
  /* prettier-ignore */
  border-right-width: 1PX;
  /* prettier-ignore */
  border-bottom-width: 1PX;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .za-grid--bordered .za-grid-item .za-grid-item__content:after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 3dppx) {
  .za-grid--bordered .za-grid-item .za-grid-item__content:after {
    width: 300%;
    height: 300%;
    transform: scale(0.3333);
    transform-origin: 0 0;
    border-radius: 0;
  }
}
.za-grid--bordered .za-grid-item .za-grid-item__content::after {
  z-index: 1;
}

.za-grid--bordered .za-grid-item.za-grid-item--horizontal-bordered .za-grid-item__content::after {
  border-left-width: 1px;
  border-right-width: 1px;
}

.za-grid--bordered .za-grid-item.za-grid-item--vertical-bordered .za-grid-item__content::after {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.za-grid--square .za-grid-item {
  height: 0;
}
.za-grid--square .za-grid-item .za-grid-item__content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.za-grid-item {
  position: relative;
}
.za-grid-item--clickable .za-grid-item__content:active {
  background: var(--item-active-background);
}

.za-grid-item__content {
  height: 100%;
  background: var(--item-background);
  position: relative;
  transition: 200ms;
}