mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2026-04-04 00:25:47 +00:00
474 lines
16 KiB
SCSS
474 lines
16 KiB
SCSS
// ==========================================================
|
|
// DS-COMPAT: Temporäre Utility-Klassen für ds-* Migration
|
|
// TODO(tailwind): Durch Tailwind-Utilities ersetzen
|
|
// Global resets + fonts are in resets.scss (loaded first)
|
|
// ==========================================================
|
|
|
|
// 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: top;
|
|
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; }
|
|
}
|
|
|
|
// ==========================================================
|
|
// Layout: Container, Section, Placeholder
|
|
// ==========================================================
|
|
.ds-container {
|
|
margin: 0 auto;
|
|
padding: 0 $space-small;
|
|
@media #{$media-query-medium} { padding: 0 $space-base; }
|
|
@media #{$media-query-large} { padding: 0 $space-x-large; }
|
|
}
|
|
.ds-container-small { max-width: #{$sm}px; }
|
|
.ds-container-medium { max-width: #{$md}px; }
|
|
.ds-container-x-large { max-width: #{$xl}px; }
|
|
|
|
.ds-section {
|
|
padding: $space-large 0;
|
|
}
|
|
|
|
.ds-placeholder {
|
|
color: $text-color-disabled;
|
|
font-style: italic;
|
|
text-align: center;
|
|
padding: $space-base;
|
|
}
|
|
|
|
// ==========================================================
|
|
// Typography: Heading
|
|
// ==========================================================
|
|
.ds-heading {
|
|
margin: 2em 0 .6em;
|
|
padding: 0;
|
|
font-family: $font-family-heading;
|
|
font-weight: $font-weight-bold;
|
|
line-height: 1.1;
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.ds-heading:first-child { margin-top: 0; }
|
|
.ds-heading:last-child { margin-bottom: 0; }
|
|
.ds-heading-h1 { font-size: $font-size-xx-large; }
|
|
.ds-heading-h2 { font-size: $font-size-xx-large; }
|
|
.ds-heading-h3 { font-size: $font-size-x-large; }
|
|
.ds-heading-h4 { font-size: $font-size-large; }
|
|
@media #{$media-query-large} {
|
|
.ds-heading-h1 { font-size: $font-size-xxx-large; }
|
|
}
|
|
.ds-heading-soft { color: $text-color-softer; }
|
|
.ds-heading-no-margin { margin: 0; }
|
|
.ds-heading-align-center { text-align: center; }
|
|
|
|
// Tab Nav — styles are in TabNavigation.vue (scoped), no global .ds-tab-nav needed
|
|
|
|
// ==========================================================
|
|
// List
|
|
// ==========================================================
|
|
.ds-list {
|
|
margin: 0 0 1em;
|
|
padding: 0;
|
|
list-style: none;
|
|
line-height: $line-height-base;
|
|
}
|
|
.ds-list:last-child { margin-bottom: 0; }
|
|
|
|
// ==========================================================
|
|
// Logo
|
|
// ==========================================================
|
|
.ds-logo {
|
|
display: inline-block;
|
|
}
|
|
.ds-logo-svg {
|
|
display: block;
|
|
height: auto;
|
|
}
|
|
.ds-logo-mobile { display: block; }
|
|
.ds-logo-tablet { display: none; }
|
|
.ds-logo-desktop { display: none; }
|
|
.ds-logo-inverse { display: none; }
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.ds-logo-mobile { display: none; }
|
|
.ds-logo-tablet { display: block; }
|
|
}
|
|
@media screen and (min-width: 960px) {
|
|
.ds-logo-tablet { display: none; }
|
|
.ds-logo-desktop { display: block; }
|
|
}
|
|
|
|
// Footer — styles are in PageFooter.vue (scoped), no global .ds-footer needed
|
|
|
|
// ==========================================================
|
|
// Form / Input (used by OcelotInput)
|
|
// ==========================================================
|
|
.ds-form-item {
|
|
position: relative;
|
|
margin-bottom: $space-small;
|
|
}
|
|
.ds-form-item:last-child { margin-bottom: 0; }
|
|
|
|
.ds-input-label {
|
|
padding-bottom: $space-xx-small;
|
|
color: $text-color-soft;
|
|
font-size: $font-size-base;
|
|
display: block;
|
|
}
|
|
|
|
.ds-input-error {
|
|
color: $color-danger;
|
|
font-size: $font-size-x-small;
|
|
position: absolute;
|
|
top: 100%;
|
|
}
|
|
.ds-input-error-enter-active {
|
|
transition: opacity $duration-base $ease-out, transform $duration-base $ease-out;
|
|
}
|
|
.ds-input-error-enter, .ds-input-error-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.ds-input-wrap { position: relative; }
|
|
|
|
.ds-input {
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
font-size: $input-font-size-base;
|
|
line-height: $line-height-base;
|
|
font-family: $font-family-text;
|
|
width: 100%;
|
|
padding: $input-padding-vertical $space-x-small;
|
|
height: $input-height;
|
|
color: $text-color-base;
|
|
background: $background-color-soft;
|
|
border: $input-border-size solid $border-color-softer;
|
|
border-radius: $border-radius-base;
|
|
outline: none;
|
|
transition: all $duration-short $ease-out;
|
|
}
|
|
.ds-input::placeholder { color: $text-color-disabled; }
|
|
.ds-input-has-focus .ds-input, .ds-input:focus {
|
|
border-color: $border-color-active;
|
|
background: $background-color-base;
|
|
}
|
|
.ds-input-is-disabled .ds-input, .ds-input:disabled {
|
|
color: $text-color-disabled;
|
|
opacity: $opacity-disabled;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
background-color: $background-color-disabled;
|
|
}
|
|
.ds-input-is-readonly .ds-input { pointer-events: none; }
|
|
.ds-input-has-error .ds-input { border-color: $border-color-danger; }
|
|
|
|
.ds-input-size-small {
|
|
font-size: $font-size-small;
|
|
.ds-input { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
|
|
}
|
|
.ds-input-size-large {
|
|
font-size: $font-size-large;
|
|
.ds-input { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }
|
|
}
|
|
|
|
textarea.ds-input { height: auto; min-height: $input-height; resize: none; }
|
|
textarea.ds-input-size-small { min-height: $input-height-small; }
|
|
textarea.ds-input-size-large { min-height: $input-height-large; }
|
|
|
|
.ds-input-icon, .ds-input-icon-right {
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $input-height;
|
|
color: $text-color-softer;
|
|
transition: color $duration-short $ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.ds-input-has-focus .ds-input-icon,
|
|
.ds-input-has-focus .ds-input-icon-right { color: $text-color-base; }
|
|
.ds-input-size-small .ds-input-icon,
|
|
.ds-input-size-small .ds-input-icon-right { width: $input-height-small; }
|
|
.ds-input-size-large .ds-input-icon,
|
|
.ds-input-size-large .ds-input-icon-right { width: $input-height-large; }
|
|
.ds-input-icon-right { right: 0; left: auto; }
|
|
|
|
.ds-input-has-icon { padding-left: $input-height; }
|
|
.ds-input-size-small .ds-input-has-icon { padding-left: $input-height-small; }
|
|
.ds-input-size-large .ds-input-has-icon { padding-left: $input-height-large; }
|
|
.ds-input-has-icon-right { padding-right: $input-height; }
|
|
.ds-input-size-small .ds-input-has-icon-right { padding-right: $input-height-small; }
|
|
.ds-input-size-large .ds-input-has-icon-right { padding-right: $input-height-large; }
|
|
|
|
// ==========================================================
|
|
// Select (used by OcelotSelect)
|
|
// ==========================================================
|
|
.ds-select-wrap { position: relative; }
|
|
|
|
.ds-select {
|
|
appearance: none;
|
|
box-sizing: border-box;
|
|
font-size: $input-font-size-base;
|
|
line-height: $line-height-base;
|
|
font-family: $font-family-text;
|
|
width: 100%;
|
|
padding: $input-padding-vertical $space-x-small;
|
|
height: $input-height;
|
|
color: $text-color-base;
|
|
background: $background-color-soft;
|
|
border: $input-border-size solid $border-color-softer;
|
|
border-radius: $border-radius-base;
|
|
outline: none;
|
|
transition: all $duration-short $ease-out;
|
|
user-select: none;
|
|
}
|
|
.ds-select::placeholder { color: $text-color-disabled; }
|
|
.ds-input-has-focus .ds-select, .ds-select:focus {
|
|
border-color: $border-color-active;
|
|
background: $background-color-base;
|
|
}
|
|
.ds-input-is-disabled .ds-select, .ds-select:disabled {
|
|
color: $text-color-disabled;
|
|
opacity: $opacity-disabled;
|
|
pointer-events: none;
|
|
cursor: not-allowed;
|
|
background-color: $background-color-disabled;
|
|
}
|
|
.ds-input-is-readonly .ds-select { pointer-events: none; }
|
|
.ds-input-has-error .ds-select { border-color: $border-color-danger; }
|
|
.ds-select-is-open .ds-select {
|
|
border-bottom-left-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border-bottom: none;
|
|
}
|
|
.ds-input-size-small .ds-select { font-size: $input-font-size-small; height: $input-height-small; padding: $input-padding-vertical-small $space-x-small; }
|
|
.ds-input-size-large .ds-select { font-size: $input-font-size-large; height: $input-height-large; padding: $input-padding-vertical-large $space-x-small; }
|
|
|
|
.ds-select-multiple {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.ds-select-search, .ds-select-value {
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
border: $input-border-size solid transparent;
|
|
padding: $input-padding-vertical $space-x-small;
|
|
line-height: $line-height-base;
|
|
}
|
|
.ds-input-size-small .ds-select-search,
|
|
.ds-input-size-small .ds-select-value { padding: $input-padding-vertical-small $space-x-small; }
|
|
.ds-input-size-large .ds-select-search,
|
|
.ds-input-size-large .ds-select-value { padding: $input-padding-vertical-large $space-x-small; }
|
|
|
|
.ds-select-has-icon .ds-select-search,
|
|
.ds-select-has-icon .ds-select-value { padding-left: $input-height; }
|
|
.ds-select-has-icon-right .ds-select-search,
|
|
.ds-select-has-icon-right .ds-select-value { padding-right: $input-height; }
|
|
|
|
.ds-select-search {
|
|
appearance: none;
|
|
font-size: inherit;
|
|
font-family: $font-family-text;
|
|
width: 100%;
|
|
background: transparent;
|
|
color: $text-color-base;
|
|
outline: none;
|
|
user-select: text;
|
|
opacity: 0;
|
|
}
|
|
.ds-select-search::placeholder { color: $text-color-disabled; }
|
|
.ds-select-is-open .ds-select-search { opacity: 1; }
|
|
.ds-select-multiple .ds-select-search {
|
|
position: relative;
|
|
display: inline-flex;
|
|
width: auto;
|
|
height: auto;
|
|
padding: 0;
|
|
opacity: 1;
|
|
}
|
|
|
|
.ds-select-placeholder, .ds-select-value { pointer-events: none; }
|
|
.ds-select-is-open .ds-select-placeholder,
|
|
.ds-select-is-open .ds-select-value { opacity: 0; }
|
|
.ds-select-placeholder { color: $text-color-disabled; }
|
|
|
|
.ds-selected-options { display: flex; max-width: 100%; overflow: hidden; }
|
|
.ds-selected-option { display: inline-flex; align-items: center; margin-right: $space-xx-small; }
|
|
|
|
.ds-select-dropdown {
|
|
position: absolute;
|
|
z-index: $z-index-dropdown;
|
|
top: 100%;
|
|
left: 0;
|
|
width: 100%;
|
|
background-color: $background-color-base;
|
|
border: $input-border-size solid $border-color-active;
|
|
border-top: 0;
|
|
border-bottom-left-radius: $border-radius-base;
|
|
border-bottom-right-radius: $border-radius-base;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: all $duration-short $ease-out, border-bottom 0ms;
|
|
max-height: 240px;
|
|
overflow: auto;
|
|
}
|
|
.ds-select-is-open .ds-select-dropdown { visibility: visible; opacity: 1; }
|
|
|
|
.ds-select-dropdown-message {
|
|
padding: $input-padding-vertical $space-x-small;
|
|
color: $text-color-disabled;
|
|
}
|
|
|
|
.ds-select-options {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.ds-select-option {
|
|
padding: $input-padding-vertical $space-x-small;
|
|
cursor: pointer;
|
|
transition: all $duration-short $ease-out;
|
|
}
|
|
.ds-select-option.ds-select-option-hover {
|
|
background-color: $background-color-softer;
|
|
color: $text-color-base;
|
|
}
|
|
.ds-select-option-is-selected {
|
|
background-color: $background-color-soft;
|
|
color: $text-color-primary;
|
|
}
|
|
|
|
.ds-select-icon, .ds-select-icon-right {
|
|
position: absolute;
|
|
top: 0; bottom: 0; left: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: $input-height;
|
|
color: $text-color-softer;
|
|
transition: color $duration-short $ease-out;
|
|
pointer-events: none;
|
|
}
|
|
.ds-input-has-focus .ds-select-icon,
|
|
.ds-input-has-focus .ds-select-icon-right { color: $text-color-base; }
|
|
.ds-select-icon-right { right: 0; left: auto; }
|