spawntree
/
ihk24
2
0
Fork 0
Código Incidencias 0 Pull Requests 0 Lanzamientos 0 Wiki Actividad
Explorar el Código

fixes

master
FlorianEisenmenger hace 3 semanas
padre
0e6c8ef82b
commit
4184fe62d3
Se han modificado 4 ficheros con 218 adiciones y 188 borrados
Dividir vista
Opciones de diferencias
Mostrar estadísticas Descargar archivo de parche Descargar archivo de diferencias
  1. +182
    -184
      gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss
  2. +7
    -2
      gfi-ihk-2024/stories/components/teaser/TeaserComponent.js
  3. +25
    -1
      gfi-ihk-2024/stories/components/teaser/teaser.scss
  4. +4
    -1
      gfi-ihk-2024/stories/sections/teasers/teasers.scss

+ 182
- 184
gfi-ihk-2024/stories/_global/gfi-styles/_richtext.scss Ver fichero

@@ -2,201 +2,120 @@

.richtext {
:where(:not(.infobox)) {
ul, ol {
margin: 1em 0 1.5em;
padding: 0;
ul, ol {
margin: 1em 0 1.5em;
padding: 0;

li {
position: relative;
display: block;
padding-left: 32px;
margin-bottom: 0.4em;
li {
position: relative;
display: block;
padding-left: 32px;
margin-bottom: 0.4em;

@media(max-width: 767px) {
padding-left: 24px;
@media(max-width: 767px) {
padding-left: 24px;
}
}
}
}

ul.contact-buttons {
li {
padding-left: 0;
ul.contact-buttons {
li {
padding-left: 0;

&::after {
display: none;
&::after {
display: none;
}
}
}
}

ul li::after,
ol ul li::after {
content: "";
position: absolute;
left: 0;
width: 8px;
height: 8px;
border-radius: 3px;
background-color: $color-secondary;
background-color: var(--theme-color-secondary, $color-secondary);
top: 12px;

@media(max-width: 767px) {
top: 10px;
width: 6px;
height: 6px;
}
}

.accordion > ul > li:after, ul.accordion li:after, ul.choices li:after, ul.slider-tabs li:after, ul.contact-buttons li:after, ul.social-icons li:after {
background: none;
border: none;
}

.accordion .accordion-content .richtext ul li:after {
border: 2px solid var(--theme-color-secondary);
background-color: var(--theme-color-secondary);
}

ul.slider-tabs li {
padding-left: 0;
}

ul:not(.anchors) > li:before, ol ul li:before {
display: none;
}
ol > li:after {
display: none;
}

ul ul:not(.rte--list, tab-buttons) {
margin: 0.4em 0;

li:after {
background-color: transparent;
border: 2px solid $color-secondary;
border: 2px solid var(--theme-color-secondary, $color-secondary);
box-sizing: border-box;
}
}

ol {
counter-reset: listcount;

li:before {
counter-increment: listcount;
content: counter(listcount) ".";
font-weight: 700;
ul li::after,
ol ul li::after {
content: "";
position: absolute;
left: 0;
}
}
width: 8px;
height: 8px;
border-radius: 3px;
background-color: $color-secondary;
background-color: var(--theme-color-secondary, $color-secondary);
top: 12px;

.text a, .rte--list a, .strong a {
transition: 0.2s ease;
display: inline;
padding: 0 5px 2px;
color: $color-link;
color: var(--theme-color-link, $color-link);
background-color: $color-secondary-light;
background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
//font-weight: 400;
margin: 0 -1px -2px;
opacity: 1;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;

&:hover {
color: $color-link-hover;
@media(max-width: 767px) {
top: 10px;
width: 6px;
height: 6px;
}
}

&.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
position: relative;
padding-left: 7px;
.accordion > ul > li:after, ul.accordion li:after, ul.choices li:after, ul.slider-tabs li:after, ul.contact-buttons li:after, ul.social-icons li:after {
background: none;
border: none;
}

&:after {
@include icon-small-link-external;
font-family: "icons";
color: $color-link-hover;
font-size: 18px;
margin-left: 3px;
outline: 3px solid $color-secondary-light;
outline-offset: -2px;
text-decoration: underline;
text-transform: none;
font-weight: 400;
font-style: normal;
}
.accordion .accordion-content .richtext ul li:after {
border: 2px solid var(--theme-color-secondary);
background-color: var(--theme-color-secondary);
}

&.intranet:after {
@include icon-small-schloss;
ul.slider-tabs li {
padding-left: 0;
}

&.extranet:after {
@include icon-small-stern;
ul:not(.anchors) > li:before, ol ul li:before {
display: none;
}
ol > li:after {
display: none;
}

&[data-linktypeicon="CMDownload"]:after {
@include icon-small-download;
text-decoration: none;
display: inline-block;
line-height: 0;
outline: none;
ul ul:not(.rte--list, tab-buttons) {
margin: 0.4em 0;

li:after {
background-color: transparent;
border: 2px solid $color-secondary;
border: 2px solid var(--theme-color-secondary, $color-secondary);
box-sizing: border-box;
}
}
}

.text .image a, .rte--list .image a, .strong .image a {
background-color: var(--theme-color-secondary-dimmed);
}
ol {
counter-reset: listcount;

.text a.image-link{
background-color: #fff;
padding: 0;
margin: 0;
display: block;
&:after{
display: none;
li:before {
counter-increment: listcount;
content: counter(listcount) ".";
font-weight: 700;
position: absolute;
left: 0;
}
}
}

.responsive-table {
tr > td > a {
color: $color-link;
.text a, .rte--list a, .strong a {
transition: 0.2s ease;
display: inline;
padding: 0 5px 2px;
color: $color-link;
color: var(--theme-color-link, $color-link);
background-color: $color-secondary-light;
background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
//font-weight: 400;
margin: 0 -1px -2px;
opacity: 1;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

a {
&.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
transition: 0.2s ease;
display: inline;
color: $color-link;
color: var(--theme-color-link, $color-link);
background-color: $color-secondary-light;
background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
//font-weight: 400;
margin: 0 -1px -2px;
opacity: 1;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;

&:hover {
color: $color-link-hover;
}
&:hover {
color: $color-link-hover;
}

&.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
position: relative;
padding: 0 5px 2px 7px;
padding-left: 7px;

&:after {
@include icon-small-link-external;
@@ -230,51 +149,130 @@
}
}

}
.text .image a, .rte--list .image a, .strong .image a {
background-color: var(--theme-color-secondary-dimmed);
}

.text a.image-link{
background-color: #fff;
padding: 0;
margin: 0;
display: block;
&:after{
display: none;
}
}

ul.highcharts-menu {
padding: 10px 0 !important;
.responsive-table {
tr > td > a {
color: $color-link;
transition: 0.2s ease;
display: inline;
padding: 0 5px 2px;
background-color: $color-secondary-light;
//font-weight: 400;
margin: 0 -1px -2px;
opacity: 1;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}

li {
padding: 5px 20px;
margin: 0;
a {
&.external, &.extranet, &.intranet, &[data-linktypeicon="CMExternalLink"], &[data-linktypeicon="CMDownload"] {
transition: 0.2s ease;
display: inline;
color: $color-link;
color: var(--theme-color-link, $color-link);
background-color: $color-secondary-light;
background-color: var(--theme-color-secondary-dimmed, $color-secondary-light);
//font-weight: 400;
margin: 0 -1px -2px;
opacity: 1;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;

&:hover {
color: $color-link-hover;
}

position: relative;
padding: 0 5px 2px 7px;

&:after {
@include icon-small-link-external;
font-family: "icons";
color: $color-link-hover;
font-size: 18px;
margin-left: 3px;
outline: 3px solid $color-secondary-light;
outline-offset: -2px;
text-decoration: underline;
text-transform: none;
font-weight: 400;
font-style: normal;
}
}

&:after {
display: none;
&.intranet:after {
@include icon-small-schloss;
}

&.extranet:after {
@include icon-small-stern;
}

&[data-linktypeicon="CMDownload"]:after {
@include icon-small-download;
text-decoration: none;
display: inline-block;
line-height: 0;
outline: none;
}
}

}

hr {
margin: 5px 0 8px;
ul.highcharts-menu {
padding: 10px 0 !important;

li {
padding: 5px 20px;
margin: 0;

&:after {
display: none;
}
}

hr {
margin: 5px 0 8px;
}
}
}

ul.tab-buttons {
margin: 0;
ul.tab-buttons {
margin: 0;

li {
display: inline-block;
margin-bottom: 12px;
padding-left: 0;
li {
display: inline-block;
margin-bottom: 12px;
padding-left: 0;

&:after {
content: "";
height: 0;
width: 0;
border: 0;
&:after {
content: "";
height: 0;
width: 0;
border: 0;
}
}
}
}

.detail-text {
overflow-x: hidden;
}
.detail-text {
overflow-x: hidden;
}
}

}


blockquote {
border-left: 6px solid $color-secondary;
border-left: 6px solid var(--theme-color-secondary, $color-secondary);


+ 7
- 2
gfi-ihk-2024/stories/components/teaser/TeaserComponent.js Ver fichero

@@ -99,7 +99,12 @@ export const createTeaser = ({
teaser.appendChild(rt);
}
if (type === 'fullwidth') {
teaser.dataset.imageSize = imageSize;
const imageSizeMap = {
'large': 'l',
'medium': 'm',
'small': 's'
};
teaser.dataset.imageSize = imageSizeMap[imageSize] || imageSize;
}

// teaserLink nur OHNE linklistData
@@ -109,7 +114,7 @@ export const createTeaser = ({
teaserLink.setAttribute('aria-label', 'Beschreibender Link-Text');

if (linkType) {
teaserLink.classList.add(linkType);
teaser.classList.add(linkType);
}
}



+ 25
- 1
gfi-ihk-2024/stories/components/teaser/teaser.scss Ver fichero

@@ -217,7 +217,7 @@
margin: 0.5em 0;
}

&:hover {
&:has(.teaser--link):hover {
.image-box::after {
height: var(--border-width-hover);
}
@@ -302,6 +302,30 @@
@include icon-video-small;
}

@media(min-width: 568px) {
.teaser[data-image-size="l"],
.teaser[data-image-size="m"],
.teaser[data-image-size="s"] {
.reading-time {
position: absolute;
right: 0;
bottom: 0;
width: auto;
}
}
}

.teaser[data-image-size="l"] .like-h4,
.teaser[data-image-size="m"] .like-h4,
.teaser[data-image-size="s"] .like-h4,
.teaser[data-image-size="l"] .like-h4.title,
.teaser[data-image-size="m"] .like-h4.title,
.teaser[data-image-size="s"] .like-h4.title {
@include h2;
text-decoration-thickness: 0.07em;
margin-top: 0;
}

@media(min-width: 568px) {
[date-type='fullwidth'], .teaser.fullwidth, .teasers[data-items="1"] {
display: block;


+ 4
- 1
gfi-ihk-2024/stories/sections/teasers/teasers.scss Ver fichero

@@ -634,7 +634,10 @@
}
}

.desktop a.teaser:hover, .mobile a.teaser:active {
.desktop a.teaser:hover,
.desktop .teaser:has(.teaser--link):hover,
.mobile a.teaser:active,
.mobile .teaser:has(.teaser--link):active {
color: var(--theme-color-link-hover);

.image-box:after {


Escribir Vista previa
Cargando…
Cancelar
Guardar