+
${displayAddress1}
+
${displayAddress2}
${displayPhonenumber}
diff --git a/src/open_inwoner/scss/components/Button/Button.scss b/src/open_inwoner/scss/components/Button/Button.scss
index a9005d2b26..9670b69f06 100644
--- a/src/open_inwoner/scss/components/Button/Button.scss
+++ b/src/open_inwoner/scss/components/Button/Button.scss
@@ -212,14 +212,22 @@
}
}
-.h2 + .button,
-.h4 + .button,
-.p + .button,
.utrecht-heading-2 + .button,
-.utrecht-heading-4 + .button {
+.utrecht-heading-4 + .button,
+.utrecht-paragraph + .button {
margin-top: var(--spacing-large);
}
.cta-button {
margin-bottom: var(--spacing-large);
}
+
+///
+/// Legacy styling
+///
+
+.h2 + .button,
+.h4 + .button,
+.p + .button {
+ margin-top: var(--spacing-large);
+}
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 7022ed1244..02de552e45 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -271,7 +271,7 @@
flex-wrap: wrap;
justify-content: space-between;
- .p {
+ .utrecht-paragraph {
margin-top: 4px;
}
@@ -335,7 +335,7 @@
width: 100%;
}
- .p {
+ .utrecht-paragraph {
width: 100%;
}
}
diff --git a/src/open_inwoner/scss/components/Card/LocationCardList.scss b/src/open_inwoner/scss/components/Card/LocationCardList.scss
index 963369922a..40d00e4254 100644
--- a/src/open_inwoner/scss/components/Card/LocationCardList.scss
+++ b/src/open_inwoner/scss/components/Card/LocationCardList.scss
@@ -1,9 +1,4 @@
.location-card-list {
- .h4,
- .utrecht-heading-4 {
- margin-bottom: var(--spacing-large);
- }
-
&__list {
grid-template-columns: repeat(2, 1fr);
display: grid;
@@ -20,4 +15,12 @@
.card {
height: 100%;
}
+
+ ///
+ /// Legacy styling
+ ///
+
+ .h4 {
+ margin-bottom: var(--spacing-large);
+ }
}
diff --git a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
index d0404f1ea9..6d5b912f2d 100644
--- a/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
+++ b/src/open_inwoner/scss/components/CardContainer/CardContainer.scss
@@ -41,8 +41,8 @@
.card-container + .card-container,
.map + .card-container,
-.p + .card-container,
-.card-container + h2 {
+.card-container + .utrecht-heading-2,
+.utrecht-paragraph + .card-container {
margin-top: var(--gutter-width);
}
@@ -64,3 +64,12 @@
}
}
}
+
+///
+/// Legacy styling
+///
+
+.p + .card-container,
+.card-container + .h2 {
+ margin-top: var(--gutter-width);
+}
diff --git a/src/open_inwoner/scss/components/Cases/Cases.scss b/src/open_inwoner/scss/components/Cases/Cases.scss
index fbf0f8a38d..ce783773c8 100644
--- a/src/open_inwoner/scss/components/Cases/Cases.scss
+++ b/src/open_inwoner/scss/components/Cases/Cases.scss
@@ -10,8 +10,8 @@
cursor: pointer;
}
- &__title_text {
- padding-top: var(--spacing-medium);
- padding-bottom: var(--spacing-extra-large);
+ > .utrecht-paragraph--oip-title-text {
+ padding-top: var(--spacing-large);
+ padding-bottom: var(--spacing-giant);
}
}
diff --git a/src/open_inwoner/scss/components/File/File.scss b/src/open_inwoner/scss/components/File/File.scss
index 325a179c96..a1997ab955 100644
--- a/src/open_inwoner/scss/components/File/File.scss
+++ b/src/open_inwoner/scss/components/File/File.scss
@@ -49,7 +49,7 @@
}
&__file .link,
- &__file .p {
+ &__file .utrecht-paragraph {
padding: var(--spacing-large);
box-sizing: border-box;
}
diff --git a/src/open_inwoner/scss/components/File/FileList.scss b/src/open_inwoner/scss/components/File/FileList.scss
index c9cfff5622..544a92fadb 100644
--- a/src/open_inwoner/scss/components/File/FileList.scss
+++ b/src/open_inwoner/scss/components/File/FileList.scss
@@ -34,11 +34,20 @@
/// Contextual
///
-.file-list + .p,
-.file-list + .utrecht-heading-2 {
+.file-list + .utrecht-heading-2,
+.file-list + .utrecht-paragraph {
margin-top: var(--spacing-large);
}
.utrecht-heading-2 + .file-list {
margin-top: var(--spacing-extra-large);
}
+
+///
+/// Legacy styling
+///
+
+.file-list + .h2,
+.file-list + .p {
+ margin-top: var(--spacing-large);
+}
diff --git a/src/open_inwoner/scss/components/Form/FileInput.scss b/src/open_inwoner/scss/components/Form/FileInput.scss
index 9e83bc7cd4..a690c64874 100644
--- a/src/open_inwoner/scss/components/Form/FileInput.scss
+++ b/src/open_inwoner/scss/components/Form/FileInput.scss
@@ -73,7 +73,7 @@
height: var(--row-height-giant);
}
- > .p {
+ > .utrecht-paragraph {
margin: calc(0.5 * var(--gutter-width)) 0;
display: block;
text-align: center;
@@ -91,7 +91,7 @@
.file__file.error {
border-color: var(--color-red-notification);
- .p {
+ .utrecht-paragraph {
color: var(--color-gray-dark-900);
}
@@ -116,7 +116,7 @@
}
}
- .p--small {
+ .utrecht-paragraph--oip-small {
margin-top: var(--spacing-small);
margin-bottom: var(--spacing-small);
diff --git a/src/open_inwoner/scss/components/Form/Form.scss b/src/open_inwoner/scss/components/Form/Form.scss
index 8994dc5c4e..7a99372cd8 100644
--- a/src/open_inwoner/scss/components/Form/Form.scss
+++ b/src/open_inwoner/scss/components/Form/Form.scss
@@ -91,11 +91,11 @@
transform: translateY(-5px);
}
- &__control > .label .p:last-child {
+ &__control > .label .utrecht-paragraph:last-child {
font-size: var(--font-size-body-small);
}
- &__control > .label .p.p--compact {
+ &__control > .label .utrecht-paragraph.utrecht-paragraph--oip-compact {
font-size: var(--font-size-body);
}
diff --git a/src/open_inwoner/scss/components/Header/AnchorMenu.scss b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
index e1251abe14..2da27b3e4e 100644
--- a/src/open_inwoner/scss/components/Header/AnchorMenu.scss
+++ b/src/open_inwoner/scss/components/Header/AnchorMenu.scss
@@ -1,9 +1,3 @@
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6,
.utrecht-heading-1,
.utrecht-heading-2,
.utrecht-heading-3,
@@ -158,3 +152,20 @@
}
}
}
+
+///
+/// Legacy scroll styling
+///
+
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+ scroll-margin-top: 122px;
+
+ @media (min-width: 768px) {
+ scroll-margin-top: var(--spacing-medium);
+ }
+}
diff --git a/src/open_inwoner/scss/components/Header/Header.scss b/src/open_inwoner/scss/components/Header/Header.scss
index 563ec41a62..28239e9cb9 100644
--- a/src/open_inwoner/scss/components/Header/Header.scss
+++ b/src/open_inwoner/scss/components/Header/Header.scss
@@ -345,8 +345,8 @@ $vm: var(--spacing-large);
width: 100%;
// Cut text and display dots if username is very long
- > .p {
- display: inline-block !important;
+ > .utrecht-paragraph {
+ display: flex !important;
max-width: 250px;
overflow: hidden;
white-space: nowrap;
@@ -366,7 +366,7 @@ $vm: var(--spacing-large);
@media (min-width: 768px) {
justify-content: flex-end;
- > .p {
+ > .utrecht-paragraph {
display: flex;
max-width: initial;
overflow: initial;
@@ -491,7 +491,7 @@ $vm: var(--spacing-large);
margin: var(--spacing-large) 0 0 0;
width: calc(100% - (var(--spacing-extra-large)));
- .p {
+ .utrecht-paragraph {
display: flex;
align-items: center;
justify-content: space-between;
diff --git a/src/open_inwoner/scss/components/List/_ListItem.scss b/src/open_inwoner/scss/components/List/_ListItem.scss
index e7af4e0d4f..a686b9eda8 100644
--- a/src/open_inwoner/scss/components/List/_ListItem.scss
+++ b/src/open_inwoner/scss/components/List/_ListItem.scss
@@ -46,11 +46,19 @@
margin: 0;
}
- .p + .p {
+ .utrecht-paragraph + .utrecht-paragraph {
margin-top: 0;
}
& + & {
border-top: none;
}
+
+ ///
+ /// Legacy styling
+ ///
+
+ .p + .p {
+ margin-top: 0;
+ }
}
diff --git a/src/open_inwoner/scss/components/Map/_Map.scss b/src/open_inwoner/scss/components/Map/_Map.scss
index f04f82b47f..5e93cf3956 100644
--- a/src/open_inwoner/scss/components/Map/_Map.scss
+++ b/src/open_inwoner/scss/components/Map/_Map.scss
@@ -13,7 +13,7 @@
}
}
-.p + .map {
+.utrecht-paragraph + .map {
margin-top: var(--spacing-large);
}
@@ -28,4 +28,25 @@
flex-direction: column;
row-gap: var(--spacing-small);
flex-wrap: wrap;
+
+ &.container--no-margin {
+ margin-top: var(--spacing-small);
+
+ & > .utrecht-paragraph {
+ margin: 0 !important;
+ }
+
+ /// leaflet reset
+ .link {
+ text-decoration: underline;
+ }
+ }
+}
+
+///
+/// Legacy styling
+///
+
+.p + .map {
+ margin-top: var(--spacing-large);
}
diff --git a/src/open_inwoner/scss/components/Messages/_Messages.scss b/src/open_inwoner/scss/components/Messages/_Messages.scss
index 270d9afc46..22ae72bc72 100644
--- a/src/open_inwoner/scss/components/Messages/_Messages.scss
+++ b/src/open_inwoner/scss/components/Messages/_Messages.scss
@@ -17,7 +17,7 @@
overflow-y: auto;
}
- &__header .p {
+ &__header .utrecht-paragraph {
margin-top: 0 !important;
}
@@ -33,7 +33,7 @@
justify-content: center;
}
- &__day-header > .p:first-child {
+ &__day-header > .utrecht-paragraph:first-child {
display: flex;
align-items: center;
width: 100%;
@@ -42,19 +42,19 @@
white-space: nowrap;
}
- &__day-header > .p:first-child:before,
- &__day-header > .p:first-child:after {
+ &__day-header > .utrecht-paragraph:first-child:before,
+ &__day-header > .utrecht-paragraph:first-child:after {
border-top: 1px solid var(--color-gray-lightest);
content: '';
margin: var(--spacing-large);
width: 100%;
}
- &__day-header > .p:first-child:before {
+ &__day-header > .utrecht-paragraph:first-child:before {
margin-left: 0;
}
- &__day-header > .p:first-child:after {
+ &__day-header > .utrecht-paragraph:first-child:after {
margin-right: 0;
}
@@ -85,7 +85,7 @@
.message__body {
border: 1px solid transparent;
- .p::before {
+ .utrecht-paragraph::before {
background-color: var(--color-primary);
border-radius: var(--border-radius);
bottom: 21px;
diff --git a/src/open_inwoner/scss/components/Notification/_Notification.scss b/src/open_inwoner/scss/components/Notification/_Notification.scss
index dd83f32621..89f5e3212a 100644
--- a/src/open_inwoner/scss/components/Notification/_Notification.scss
+++ b/src/open_inwoner/scss/components/Notification/_Notification.scss
@@ -19,7 +19,7 @@
[class*='icon'],
[class*='Icon'] {
- line-height: 1.3;
+ line-height: var(--spacing-giant);
}
/// Individual errors.
@@ -67,7 +67,7 @@
color: var(--notification-color-text);
}
- &:not(#{&}--contents) .p {
+ &:not(#{&}--contents) .utrecht-paragraph {
color: var(--notification-color-text);
}
@@ -99,7 +99,7 @@
}
& &__content {
- margin-top: 0.15em;
+ margin-top: var(--spacing-tiny);
& * {
margin: 0;
diff --git a/src/open_inwoner/scss/components/Product/product-detail.scss b/src/open_inwoner/scss/components/Product/product-detail.scss
index 7ef4693fc8..6391c6ce5b 100644
--- a/src/open_inwoner/scss/components/Product/product-detail.scss
+++ b/src/open_inwoner/scss/components/Product/product-detail.scss
@@ -42,6 +42,12 @@
}
}
+.utrecht-paragraph--oip-summary {
+ margin-bottom: var(--gutter-width) !important;
+}
+
+/// Legacy style
+
p.p-summary {
margin-bottom: var(--gutter-width);
}
diff --git a/src/open_inwoner/scss/components/Profile/_personal-overview.scss b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
index 2841a845ca..368fb2c828 100644
--- a/src/open_inwoner/scss/components/Profile/_personal-overview.scss
+++ b/src/open_inwoner/scss/components/Profile/_personal-overview.scss
@@ -63,6 +63,12 @@
}
&.profile-section__newsletters {
+ .form {
+ gap: var(--spacing-large);
+ }
+ .checkbox__p.newsletter-remarks {
+ line-height: var(--font-line-height-body);
+ }
.button {
padding: var(--spacing-medium) var(--spacing-giant);
}
diff --git a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
index c1d03cd3f4..dc17354774 100644
--- a/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
+++ b/src/open_inwoner/scss/components/Questionnaire/Questionnaire.scss
@@ -1,10 +1,20 @@
.questionnaire {
&__fieldset {
border: 0 solid transparent;
+
legend {
padding: 0;
}
+
+ *[class^='utrecht-heading'] + .utrecht-paragraph--oip-compact {
+ margin-top: 0;
+ }
+
+ .utrecht-paragraph + .form {
+ margin-top: 0;
+ }
}
+
&__list {
list-style: none;
margin: 0;
diff --git a/src/open_inwoner/scss/components/Status/_StatusList.scss b/src/open_inwoner/scss/components/Status/_StatusList.scss
index efb454a9b6..01cc10a1e6 100644
--- a/src/open_inwoner/scss/components/Status/_StatusList.scss
+++ b/src/open_inwoner/scss/components/Status/_StatusList.scss
@@ -54,18 +54,18 @@
color: var(--color-gray-dark-900);
}
- .p-date {
+ .status-list__date {
font-size: var(--font-size-body-small);
}
- .p-text {
+ .status-list__text {
display: flex;
flex-direction: column;
}
- .p__upload {
+ .status-list__upload {
display: none;
- &.p__upload--enabled {
+ &.status-list__upload--enabled {
//hide when final status is reached
display: block;
}
diff --git a/src/open_inwoner/scss/components/Typography/H1.scss b/src/open_inwoner/scss/components/Typography/H1.scss
index a6556ff4ca..f2bcc7742e 100644
--- a/src/open_inwoner/scss/components/Typography/H1.scss
+++ b/src/open_inwoner/scss/components/Typography/H1.scss
@@ -17,6 +17,14 @@
}
}
+.utrecht-heading-1 + .card-container {
+ margin-top: var(--gutter-width);
+}
+
+///
+/// Legacy styling
+///
+
.h1 {
color: var(--utrecht-heading-1-color);
font-family: var(--utrecht-heading-1-font-family);
@@ -38,7 +46,3 @@
margin: 0;
}
}
-
-.utrecht-heading-1 + .card-container {
- margin-top: var(--gutter-width);
-}
diff --git a/src/open_inwoner/scss/components/Typography/H2.scss b/src/open_inwoner/scss/components/Typography/H2.scss
index 0ddecfcf68..104193e7f0 100644
--- a/src/open_inwoner/scss/components/Typography/H2.scss
+++ b/src/open_inwoner/scss/components/Typography/H2.scss
@@ -27,6 +27,30 @@
}
}
+.heading-2__indicator {
+ display: flex;
+ flex-direction: row;
+}
+
+///
+/// Contextual.
+///
+
+.card + .utrecht-heading-2,
+.dashboard + .utrecht-heading-2,
+.status-list + .utrecht-heading-2,
+.table + .utrecht-heading-2 {
+ margin-top: var(--row-height);
+}
+
+.utrecht-paragraph + .utrecht-heading-2 {
+ margin-top: var(--spacing-large);
+}
+
+///
+/// Legacy styling
+///
+
.h2 {
color: var(--utrecht-heading-2-color);
font-family: var(--utrecht-heading-2-font-family);
@@ -55,24 +79,10 @@
}
}
-.heading-2__indicator {
- display: flex;
- flex-direction: row;
-}
-
-///
-/// Contextual.
-///
-
-.table + .h2,
-.card + .utrecht-heading-2,
-.dashboard + .utrecht-heading-2,
-.status-list + .utrecht-heading-2,
-.table + .utrecht-heading-2 {
+.table + .h2 {
margin-top: var(--row-height);
}
-.p + .h2,
-.p + .utrecht-heading-2 {
+.p + .h2 {
margin-top: var(--spacing-large);
}
diff --git a/src/open_inwoner/scss/components/Typography/H3.scss b/src/open_inwoner/scss/components/Typography/H3.scss
index bfadb41528..bf45ca0a1c 100644
--- a/src/open_inwoner/scss/components/Typography/H3.scss
+++ b/src/open_inwoner/scss/components/Typography/H3.scss
@@ -1,6 +1,14 @@
@import '~@utrecht/components/dist/heading-3/css/index.css';
@import '~microscope-sass/lib/responsive';
+.utrecht-paragraph + .utrecht-heading-3 {
+ margin-top: var(--spacing-large);
+}
+
+///
+/// Legacy styling
+///
+
.h3 {
color: var(--utrecht-heading-3-color);
font-family: var(--utrecht-heading-3-font-family);
@@ -17,7 +25,6 @@
}
}
-.p + .utrecht-heading-3,
.p + .h3 {
margin-top: var(--spacing-large);
}
diff --git a/src/open_inwoner/scss/components/Typography/H4.scss b/src/open_inwoner/scss/components/Typography/H4.scss
index a6244c7623..3423ae5a1f 100644
--- a/src/open_inwoner/scss/components/Typography/H4.scss
+++ b/src/open_inwoner/scss/components/Typography/H4.scss
@@ -1,6 +1,10 @@
@import '~@utrecht/components/dist/heading-4/css/index.css';
@import '~microscope-sass/lib/responsive';
+///
+/// Legacy styling - other styling comes from NLDS
+///
+
.h4 {
color: var(--utrecht-heading-4-color);
font-family: var(--utrecht-heading-4-font-family);
diff --git a/src/open_inwoner/scss/components/Typography/Link.scss b/src/open_inwoner/scss/components/Typography/Link.scss
index f560b0f95b..cd5d611e39 100644
--- a/src/open_inwoner/scss/components/Typography/Link.scss
+++ b/src/open_inwoner/scss/components/Typography/Link.scss
@@ -43,7 +43,6 @@
color: var(--color-secondary);
}
- .leaflet-container .h4 &--primary,
.leaflet-container .utrecht-heading-4 &--primary {
color: var(--color-black);
}
@@ -94,4 +93,12 @@
*[class*='Icon']:first-child {
transform: scale(1);
}
+
+ ///
+ /// Legacy styling
+ ///
+
+ .leaflet-container .h4 &--primary {
+ color: var(--color-black);
+ }
}
diff --git a/src/open_inwoner/scss/components/Typography/LinkList.scss b/src/open_inwoner/scss/components/Typography/LinkList.scss
index 1b742bc98a..5ecac2309c 100644
--- a/src/open_inwoner/scss/components/Typography/LinkList.scss
+++ b/src/open_inwoner/scss/components/Typography/LinkList.scss
@@ -1,5 +1,4 @@
.link-list {
- .h4,
.utrecht-heading-4 {
margin-bottom: var(--spacing-large);
}
@@ -28,4 +27,12 @@
margin-bottom: 0;
}
}
+
+ ///
+ /// Legacy styling
+ ///
+
+ .h4 {
+ margin-bottom: var(--spacing-large);
+ }
}
diff --git a/src/open_inwoner/scss/components/Typography/P.scss b/src/open_inwoner/scss/components/Typography/P.scss
index 61370fbac6..fcbba2e43a 100644
--- a/src/open_inwoner/scss/components/Typography/P.scss
+++ b/src/open_inwoner/scss/components/Typography/P.scss
@@ -1,27 +1,29 @@
-.p {
- color: var(--font-color-body);
- font-family: var(--font-family-body);
- font-size: var(--font-size-body);
- line-height: var(--font-line-height-body);
- font-weight: normal;
- margin: 0;
+@import '~@utrecht/components/dist/paragraph/css/index.css';
- {&}--compact {
- margin-top: 0 !important;
- margin-bottom: 0 !important;
- }
+.utrecht-paragraph {
+ // Takes style values from NLDS community
- &--small {
- font-size: var(--font-size-body-small);
- line-height: var(--font-line-height-body-small);
- }
+ &--oip {
+ // Takes style values from our own design-tokens NPM package
+ margin: 0;
- &--muted {
- color: var(--color-mute);
- }
+ // Extensions of the utrecht-paragraph component with OIP-specific styles.
+ &-muted {
+ color: var(--oip-utrecht-paragraph-muted-color);
+ }
- &--centered {
- text-align: center;
+ &-centered {
+ text-align: var(--oip-utrecht-paragraph-centered-text-align);
+ }
+
+ &-compact {
+ margin-top: var(--oip-utrecht-paragraph-compact-margin-top);
+ margin-bottom: var(--oip-utrecht-paragraph-compact-margin-bottom);
+ }
+
+ &:empty {
+ margin: 0 !important;
+ }
}
&:empty {
@@ -29,58 +31,104 @@
}
}
-*[class^='h'] + .p,
-*[class^='utrecht-heading'] + .p {
+*[class^='utrecht-heading'] + .utrecht-paragraph {
margin-top: var(--spacing-small);
}
-.p + .h1,
-.p + .h2,
-.p + .h3,
-.p + .utrecht-heading-1,
-.p + .utrecht-heading-2,
-.p + .utrecht-heading-3 {
+.utrecht-paragraph + .utrecht-heading-1,
+.utrecht-paragraph + .utrecht-heading-2,
+.utrecht-paragraph + .utrecht-heading-3 {
margin-top: var(--gutter-width);
}
-.p + .h4,
-.p + .utrecht-heading-4 {
+.utrecht-paragraph + .utrecht-heading-4 {
margin-top: var(--row-height-small);
}
-.p + .p {
+.utrecht-paragraph + .utrecht-paragraph {
margin-top: var(--font-line-height-body);
}
-.tag-list + .p {
+.tag-list + .utrecht-paragraph,
+.utrecht-paragraph + .form {
margin-top: var(--spacing-extra-large);
}
-.p .link {
- //text-decoration: underline;
+.utrecht-paragraph .link {
.content {
text-decoration: underline;
}
+
&:hover {
text-decoration: none;
}
+
.material-icons {
text-decoration: none;
+
&:hover {
text-decoration: none;
}
}
}
-.p--no-margin {
- margin-top: var(--spacing-small);
+///
+/// Legacy styling
+///
+
+.p {
+ color: var(--utrecht-paragraph-color);
+ font-family: var(--utrecht-paragraph-font-family);
+ font-size: var(--utrecht-paragraph-font-size);
+ line-height: var(--utrecht-paragraph-line-height);
+ font-weight: normal;
+ margin: 0;
- & > .p {
+ &:empty {
margin: 0 !important;
}
+}
+
+*[class^='h1'] + .p,
+*[class^='h2'] + .p,
+*[class^='h3'] + .p,
+*[class^='h4'] + .p {
+ margin-top: var(--spacing-small);
+}
- /// leaflet reset
- .link {
+.p + .h1,
+.p + .h2,
+.p + .h3 {
+ margin-top: var(--gutter-width);
+}
+
+.p + .h4 {
+ margin-top: var(--row-height-small);
+}
+
+.p + .p {
+ margin-top: var(--font-line-height-body);
+}
+
+.tag-list + .p,
+.p + .form {
+ margin-top: var(--spacing-extra-large);
+}
+
+.p .link {
+ .content {
text-decoration: underline;
}
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ .material-icons {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
}
diff --git a/src/open_inwoner/scss/components/Typography/wysiwyg.scss b/src/open_inwoner/scss/components/Typography/wysiwyg.scss
index 9629a1a7f9..7fba52f122 100644
--- a/src/open_inwoner/scss/components/Typography/wysiwyg.scss
+++ b/src/open_inwoner/scss/components/Typography/wysiwyg.scss
@@ -1,16 +1,15 @@
.wysiwyg {
- font-family: var(--font-family-body);
+ font-family: var(--utrecht-document-font-family);
a {
display: inline-flex;
flex-direction: row;
align-items: center;
- font-size: var(--font-size-body);
- line-height: var(--font-line-height-body);
+ font-size: var(--utrecht-document-font-size);
+ line-height: var(--utrecht-document-line-height);
text-decoration: none;
gap: var(--spacing-small);
color: var(--color-secondary);
-
word-wrap: break-word;
}
@@ -20,11 +19,11 @@
h4,
h5,
h6 {
- font-family: var(--font-family-heading);
+ font-family: var(--utrecht-heading-font-family);
}
ul {
margin: 0;
- padding: 0 0 0 var(--font-size-body);
+ padding: 0 0 0 var(--utrecht-document-font-size);
}
}
diff --git a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
index 8eb7a7e33b..9d566734aa 100644
--- a/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
+++ b/src/open_inwoner/scss/components/UserFeed/UserFeed.scss
@@ -14,8 +14,12 @@
background-color: var(--color-white);
color: var(--color-red-notification);
display: block;
- line-height: var(--font-line-height-body);
+ line-height: var(--utrecht-document-line-height);
position: relative;
+
+ & * {
+ color: var(--color-red-notification);
+ }
}
&__list {
@@ -67,6 +71,7 @@
}
}
+ /// Cards in userfeed
.card {
justify-content: flex-start;
@@ -97,6 +102,7 @@
font-family: var(--font-family-body);
font-size: var(--font-size-body-small);
font-weight: normal;
+ line-height: var(--utrecht-document-line-height);
overflow-wrap: break-word;
word-break: normal;
padding: var(--font-size-body-small) var(--card-spacing) 0
@@ -106,10 +112,10 @@
}
.userfeed-card__description {
- color: var(--font-color-heading);
- font-family: var(--font-family-heading);
+ color: var(--utrecht-heading-color);
+ font-family: var(--utrecht-heading-font-family);
font-size: var(--font-size-body);
- line-height: var(--font-line-height-body);
+ line-height: var(--utrecht-document-line-height);
margin: 0;
padding: var(--spacing-medium) var(--row-height-big) var(--card-spacing)
var(--card-spacing);
diff --git a/src/open_inwoner/scss/overwrites/_ckeditor.scss b/src/open_inwoner/scss/overwrites/_ckeditor.scss
index 6a487eff0b..f5350091d3 100644
--- a/src/open_inwoner/scss/overwrites/_ckeditor.scss
+++ b/src/open_inwoner/scss/overwrites/_ckeditor.scss
@@ -1,10 +1,26 @@
.li .link,
-.p .link {
+.utrecht-paragraph .link {
text-decoration: underline;
display: inline;
}
// Style icons separately
+.utrecht-paragraph .link *[class*='icon'] {
+ text-decoration: none;
+ transform: scale(0.75);
+ display: inline-block;
+ vertical-align: bottom;
+}
+
+///
+/// Legacy styling
+///
+
+.p .link {
+ text-decoration: underline;
+ display: inline;
+}
+
.p .link *[class*='icon'] {
text-decoration: none;
transform: scale(0.75);
diff --git a/src/open_inwoner/scss/views/App.scss b/src/open_inwoner/scss/views/App.scss
index ca17b98f4d..9e715264f8 100644
--- a/src/open_inwoner/scss/views/App.scss
+++ b/src/open_inwoner/scss/views/App.scss
@@ -36,7 +36,7 @@
--color-green: #d5e7d4;
--color-green-dark: #248641;
--color-red: #e50026;
- --color-red-notification: #d94100;
+ --color-red-notification: var(--oip-color-red-notification);
--color-white: #fff;
--color-yellow: #f8d62d;
--color-yellow-dark: #cca000;
diff --git a/src/open_inwoner/scss/views/_product_detail.scss b/src/open_inwoner/scss/views/_product_detail.scss
index c6acac7f01..ae391cb70a 100644
--- a/src/open_inwoner/scss/views/_product_detail.scss
+++ b/src/open_inwoner/scss/views/_product_detail.scss
@@ -1,5 +1,4 @@
.view--products-category_product_detail {
- .h4,
.utrecht-heading-4 {
margin: 21px 0;
}
@@ -10,4 +9,12 @@
width: 99%;
display: block;
}
+
+ ///
+ /// Legacy styling
+ ///
+
+ .h4 {
+ margin: 21px 0;
+ }
}
diff --git a/src/open_inwoner/templates/404.html b/src/open_inwoner/templates/404.html
index 3bd58206c7..4d67b458d1 100644
--- a/src/open_inwoner/templates/404.html
+++ b/src/open_inwoner/templates/404.html
@@ -3,5 +3,5 @@
{% block content %}
{% trans "Sorry, the requested page could not be found (404)" %}
-
{% link href="/" text=_("Ga naar de home pagina") %}
+
{% link href="/" text=_("Ga naar de home pagina") %}
{% endblock content %}
diff --git a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
index 6b026be949..4990179086 100644
--- a/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
+++ b/src/open_inwoner/templates/cms/banner/banner_text_plugin.html
@@ -3,7 +3,7 @@
{{ instance.title }} {{ request.user.get_full_name }}
{% if instance.description %}
-
{{ instance.description|linebreaksbr }}
+
{{ instance.description|linebreaksbr }}
{% endif %}
diff --git a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
index 72ed7c0a0e..25fa99a543 100644
--- a/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
+++ b/src/open_inwoner/templates/cms/collaborate/active_plans_plugin.html
@@ -11,8 +11,8 @@
{% endif %}
{% endif %}
diff --git a/src/open_inwoner/templates/cms/fullwidth.html b/src/open_inwoner/templates/cms/fullwidth.html
index aa293b2474..b32bbcd9a7 100644
--- a/src/open_inwoner/templates/cms/fullwidth.html
+++ b/src/open_inwoner/templates/cms/fullwidth.html
@@ -25,7 +25,7 @@
{% if not request.user.is_authenticated %}
{% else %}
{% placeholder 'banner_text' %}
diff --git a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
index 03e7fa1ab0..9594344c08 100644
--- a/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
+++ b/src/open_inwoner/templates/cms/plugins/appointments/appointments.html
@@ -9,7 +9,7 @@