mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-03-01 12:44:28 +00:00
128 lines
4.9 KiB
SCSS
128 lines
4.9 KiB
SCSS
// ==========================================================
|
|
// DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
|
|
// TODO(tailwind): Durch Tailwind-Utilities ersetzen
|
|
// Grep: ds-mb-, ds-mt-, ds-my-, ds-space-centered, ds-flex
|
|
// ==========================================================
|
|
|
|
// ds-space Ersatz — Margin-Bottom
|
|
.ds-mb-xxx-small { margin-bottom: $space-xxx-small; }
|
|
.ds-mb-xx-small { margin-bottom: $space-xx-small; }
|
|
.ds-mb-x-small { margin-bottom: $space-x-small; }
|
|
.ds-mb-small { margin-bottom: $space-small; }
|
|
.ds-mb-base { margin-bottom: $space-base; }
|
|
.ds-mb-large { margin-bottom: $space-large; }
|
|
.ds-mb-x-large { margin-bottom: $space-x-large; }
|
|
.ds-mb-xx-large { margin-bottom: $space-xx-large; }
|
|
|
|
// ds-space Ersatz — Margin-Top
|
|
.ds-mt-xxx-small { margin-top: $space-xxx-small; }
|
|
.ds-mt-xx-small { margin-top: $space-xx-small; }
|
|
.ds-mt-x-small { margin-top: $space-x-small; }
|
|
.ds-mt-small { margin-top: $space-small; }
|
|
.ds-mt-base { margin-top: $space-base; }
|
|
.ds-mt-large { margin-top: $space-large; }
|
|
.ds-mt-x-large { margin-top: $space-x-large; }
|
|
.ds-mt-xx-large { margin-top: $space-xx-large; }
|
|
|
|
// ds-space Ersatz — Margin Y (top + bottom)
|
|
.ds-my-xxx-small { margin-top: $space-xxx-small; margin-bottom: $space-xxx-small; }
|
|
.ds-my-xx-small { margin-top: $space-xx-small; margin-bottom: $space-xx-small; }
|
|
.ds-my-x-small { margin-top: $space-x-small; margin-bottom: $space-x-small; }
|
|
.ds-my-small { margin-top: $space-small; margin-bottom: $space-small; }
|
|
.ds-my-base { margin-top: $space-base; margin-bottom: $space-base; }
|
|
.ds-my-large { margin-top: $space-large; margin-bottom: $space-large; }
|
|
.ds-my-x-large { margin-top: $space-x-large; margin-bottom: $space-x-large; }
|
|
.ds-my-xx-large { margin-top: $space-xx-large; margin-bottom: $space-xx-large; }
|
|
|
|
// ds-space centered
|
|
.ds-space-centered {
|
|
display: flex;
|
|
flex: 1;
|
|
text-align: center;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
// ds-list-item bullet icon (replaces DsListItem Vue component's angle-right prefix)
|
|
.ds-list-item::before {
|
|
content: '';
|
|
flex: 0 0 1.5em;
|
|
height: 1.2em;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='%2370677e'%3E%3Cpath d='M12.969 4.281l11 11 .688.719-.688.719-11 11-1.438-1.438L21.812 16 11.531 5.719z'/%3E%3C/svg%3E") no-repeat left center;
|
|
background-size: 0.6em;
|
|
}
|
|
|
|
// ds-grid Ersatz
|
|
.ds-grid { display: grid; }
|
|
|
|
// ds-flex Ersatz
|
|
.ds-flex { display: flex; flex-wrap: wrap; }
|
|
.ds-flex-no-wrap { flex-wrap: nowrap; }
|
|
.ds-flex-centered { align-items: center; justify-content: center; }
|
|
.ds-flex-item { flex: 1 0 0; min-width: 0; }
|
|
|
|
.ds-flex-gap-xxx-small { gap: $space-xxx-small; }
|
|
.ds-flex-gap-xx-small { gap: $space-xx-small; }
|
|
.ds-flex-gap-x-small { gap: $space-x-small; }
|
|
.ds-flex-gap-small { gap: $space-small; }
|
|
.ds-flex-gap-base { gap: $space-base; }
|
|
.ds-flex-gap-large { gap: $space-large; }
|
|
|
|
// ds-text Ersatz — Typography utility classes
|
|
// Grep: ds-text, ds-text-soft, ds-text-size-small, ds-text-center, ds-text-bold
|
|
.ds-text {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
margin-bottom: $font-space-x-large;
|
|
&:last-child { margin-bottom: 0; }
|
|
font-family: $font-family-text;
|
|
line-height: $line-height-base;
|
|
display: block;
|
|
}
|
|
|
|
.ds-text-bold { font-weight: $font-weight-bold; }
|
|
.ds-text-inline { display: inline; }
|
|
.ds-text-left { text-align: left; }
|
|
.ds-text-center { text-align: center; }
|
|
.ds-text-uppercase { text-transform: uppercase; }
|
|
|
|
.ds-text-size-small { font-size: $font-size-small; }
|
|
.ds-text-size-base { font-size: $font-size-base; }
|
|
.ds-text-size-large { font-size: $font-size-large; }
|
|
.ds-text-size-x-large { font-size: $font-size-x-large; }
|
|
|
|
.ds-text-soft { color: $text-color-soft; }
|
|
.ds-text-softer { color: $text-color-softer; }
|
|
.ds-text-primary { color: $text-color-primary; }
|
|
.ds-text-success { color: $text-color-success; }
|
|
.ds-text-warning { color: $text-color-warning; }
|
|
.ds-text-danger { color: $text-color-danger; }
|
|
|
|
// ds-table Ersatz
|
|
.ds-table-wrap { width: 100%; overflow: auto; }
|
|
.ds-table { width: 100%; border-collapse: collapse; }
|
|
.ds-table-col {
|
|
vertical-align: middle;
|
|
padding: $space-small $space-xx-small;
|
|
&:last-child { padding-right: 0; }
|
|
}
|
|
.ds-table-head-col {
|
|
border-bottom: $border-size-base solid $border-color-softer;
|
|
padding: $space-small $space-xx-small;
|
|
text-align: left;
|
|
font-weight: $font-weight-bold;
|
|
}
|
|
.ds-table-bordered {
|
|
.ds-table-col, .ds-table-head-col { border-bottom: $border-size-base dotted $border-color-softer; }
|
|
tr:last-child .ds-table-col { border-bottom: none; }
|
|
}
|
|
.ds-table-condensed {
|
|
.ds-table-col, .ds-table-head-col { padding-top: $space-x-small; padding-bottom: $space-x-small; }
|
|
}
|
|
.ds-table-col, .ds-table-head-col {
|
|
&.ds-table-col-right, &.ds-table-head-col-right { text-align: right; }
|
|
&.ds-table-col-center, &.ds-table-head-col-center { text-align: center; }
|
|
}
|