ACSS: Center Classes.md

Centering Classes

https://automaticcss.com/docs/centering-classes/ Angepasst auf Core Framework

[class*="center--"]:where(:not([class*="self"]))[class*="center--"]:where(:not([class*="self"])) {
  display: flex;
  flex-direction: column;
  align-items: var(--align-items, initial);
  align-content: var(--align-content, initial);
  justify-items: var(--justify-items, initial);
  justify-content: var(--justify-content, initial);
  text-align: var(--text-align, inherit);
}
.center--all {
  --align-items: center;
  --align-content: center;
  --justify-items: center;
  --justify-content: center;
  --text-align: center;
}
.center--y {
  --align-items: flex-start;
  --justify-items: center;
  --justify-content: center;
}
.center--x {
  --align-items: center;
  --justify-items: flex-start;
  --justify-content: flex-start;
}
.center--left {
  --align-items: flex-start;
  --align-content: flex-start;
  --justify-items: center;
  --justify-content: center;
  --text-align: left;
}
.center--right {
  --align-items: flex-end;
  --align-content: flex-end;
  --justify-items: center;
  --justify-content: center;
  --text-align: right;
}
.center--top {
  --align-items: center;
  --align-content: center;
  --justify-items: flex-start;
  --justify-content: flex-start;
}
.center--bottom {
  --align-items: center;
  --justify-items: flex-end;
  --justify-content: flex-end;
}
@media (max-width: 1366px) {
  .center--all-xl {
    --align-items: center;
    --align-content: center;
    --justify-items: center;
    --justify-content: center;
    --text-align: center;
  }
  .center--y-xl {
    --align-items: flex-start;
    --justify-items: center;
    --justify-content: center;
  }
  .center--x-xl {
    --align-items: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--left-xl {
    --align-items: flex-start;
    --align-content: flex-start;
    --justify-items: center;
    --justify-content: center;
    --text-align: left;
  }
  .center--right-xl {
    --align-items: flex-end;
    --align-content: flex-end;
    --justify-items: center;
    --justify-content: center;
    --text-align: right;
  }
  .center--top-xl {
    --align-items: center;
    --align-content: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--bottom-xl {
    --align-items: center;
    --justify-items: flex-end;
    --justify-content: flex-end;
  }
}
@media (max-width: 992px) {
  .center--all-l {
    --align-items: center;
    --align-content: center;
    --justify-items: center;
    --justify-content: center;
    --text-align: center;
  }
  .center--y-l {
    --align-items: flex-start;
    --justify-items: center;
    --justify-content: center;
  }
  .center--x-l {
    --align-items: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--left-l {
    --align-items: flex-start;
    --align-content: flex-start;
    --justify-items: center;
    --justify-content: center;
    --text-align: left;
  }
  .center--right-l {
    --align-items: flex-end;
    --align-content: flex-end;
    --justify-items: center;
    --justify-content: center;
    --text-align: right;
  }
  .center--top-l {
    --align-items: center;
    --align-content: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--bottom-l {
    --align-items: center;
    --justify-items: flex-end;
    --justify-content: flex-end;
  }
}
@media (max-width: 768px) {
  .center--all-m {
    --align-items: center;
    --align-content: center;
    --justify-items: center;
    --justify-content: center;
    --text-align: center;
  }
  .center--y-m {
    --align-items: flex-start;
    --justify-items: center;
    --justify-content: center;
  }
  .center--x-m {
    --align-items: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--left-m {
    --align-items: flex-start;
    --align-content: flex-start;
    --justify-items: center;
    --justify-content: center;
    --text-align: left;
  }
  .center--right-m {
    --align-items: flex-end;
    --align-content: flex-end;
    --justify-items: center;
    --justify-content: center;
    --text-align: right;
  }
  .center--top-m {
    --align-items: center;
    --align-content: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--bottom-m {
    --align-items: center;
    --justify-items: flex-end;
    --justify-content: flex-end;
  }
}
@media (max-width: 480px) {
  .center--all-s {
    --align-items: center;
    --align-content: center;
    --justify-items: center;
    --justify-content: center;
    --text-align: center;
  }
  .center--y-s {
    --align-items: flex-start;
    --justify-items: center;
    --justify-content: center;
  }
  .center--x-s {
    --align-items: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--left-s {
    --align-items: flex-start;
    --align-content: flex-start;
    --justify-items: center;
    --justify-content: center;
    --text-align: left;
  }
  .center--right-s {
    --align-items: flex-end;
    --align-content: flex-end;
    --justify-items: center;
    --justify-content: center;
    --text-align: right;
  }
  .center--top-s {
    --align-items: center;
    --align-content: center;
    --justify-items: flex-start;
    --justify-content: flex-start;
  }
  .center--bottom-s {
    --align-items: center;
    --justify-items: flex-end;
    --justify-content: flex-end;
  }
}
.center--self {
  margin-left: auto;
  margin-right: auto;
}