diff --git a/app/Navigation/NavigationMetaFields.php b/app/Navigation/NavigationMetaFields.php new file mode 100644 index 00000000..9b86b838 --- /dev/null +++ b/app/Navigation/NavigationMetaFields.php @@ -0,0 +1,80 @@ + [ + * 'meta_field' => 'META_FIELD_NAME', + * 'text' => 'TEXT_SHOWN_BESIDE_CHECKBOX' + * ] + * + * @return array[] + */ + public function getFields(): array { + return [ + 'counter' => [ + 'meta_field' => '_show-counter', + 'text' => __( 'Show counter next to this item', 'owc-formulieren' ), + ], + 'spacing' => [ + 'meta_field' => '_spacing-top', + 'text' => __( 'Add spacing to the top of this item', 'owc-formulieren' ), + ], + ]; + } + + /** + * Add custom fields to the menu item edit screen form. + * + * @param $item_id + * @param $item + * + * @return void + */ + public function addCustomFields( $item_id, $item ): void { + foreach ( $this->getFields() as $field_name => $meta_data ) { + $is_current_active = get_post_meta( $item_id, $meta_data['meta_field'], true ); + ?> +

+ +

+ getFields() as $field_name => $meta_data ) { + $value = ( $_POST[ $field_name ][ $menu_item_db_id ] ?? '' ) == 'on'; + update_post_meta( $menu_item_db_id, $meta_data['meta_field'], $value ); + } + } +} diff --git a/app/Navigation/SideNavWalker.php b/app/Navigation/SideNavWalker.php new file mode 100644 index 00000000..35faa982 --- /dev/null +++ b/app/Navigation/SideNavWalker.php @@ -0,0 +1,88 @@ +current ? 'denhaag-sidenav__link--current' : ''; + $svg = $this->getSvgByClassName( $item ); + $counter = get_post_meta( $item->ID, '_show-counter', true ) + ? '
+ +
+ 0 +
+ + +
' + : ''; + + $output .= ' +
  • + + ' . $svg . ' + ' . esc_html( $item->title ) . ' + ' . $counter . ' + '; + + return $output; + } + + /** + * Closes the list item. + * + * @param string $output Used to append additional content (passed by reference). + * @param object $data_object The data object. + * @param int $depth Depth of the item. + * @param array $args An array of additional arguments. + * + * @return string + */ + public function end_el( &$output, $item, $depth = 0, $args = array() ): string { + $output .= '
    • '; + + return $output; + } + + /** + * Returns an inline SVG based on a class name. The class name has to be identical to the file name. + * + * @path The path of the SVGs is WP_THEMES_FOLDER/PARENT_THEME/assets/img/icons + * + * @param $item + * + * @return string + */ + public function getSvgByClassName( $item ): string { + $first_class = $item->classes[0] ?? ''; + + if ( ! $first_class ) { + return ''; + } + + $path = '/assets/img/icons/' . esc_html( $first_class ) . '.svg'; + + if ( ! is_file( get_template_directory() . $path ) ) { + return ''; + } + + return file_get_contents( get_template_directory() . $path ) ?: ''; + } +} + diff --git a/composer.json b/composer.json index 7ce70463..1fb9c035 100644 --- a/composer.json +++ b/composer.json @@ -104,7 +104,7 @@ "plugin/owc-gravityforms-bag-address": "1.1.*", "plugin/owc-gravityforms-digid": "1.1.7", "plugin/owc-gravityforms-eherkenning": "dev-master", - "plugin/owc-gravityforms-zaaksysteem": "dev-master", + "plugin/owc-gravityforms-zaaksysteem": "dev-feat/remove-enable-u-add-individual-service-urls", "plugin/owc-gravityforms-zaaksysteem-enable-u": "^1.1.0", "plugin/prefill-gravity-forms": "^1.0.14", "plugin/real-time-validation-for-gravity-forms": "^1.7", diff --git a/composer.lock b/composer.lock index 1b985d05..bd02b54f 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "9cb68d1203a89ff2fb9814c813e46eee", + "content-hash": "2689068e67aa3f22708475ccd399745b", "packages": [ { "name": "aura/session", @@ -2442,16 +2442,16 @@ }, { "name": "plugin/owc-gravityforms-zaaksysteem", - "version": "dev-master", + "version": "dev-feat/remove-enable-u-add-individual-service-urls", "source": { "type": "git", "url": "https://github.com/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem.git", - "reference": "fab005d994b5ed7987263b57c7ab6c3d74425e54" + "reference": "f0928d44d435afaab79f1154fa61352b376d2f29" }, "dist": { "type": "zip", - "url": "https://api.github.com/repos/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem/zipball/fab005d994b5ed7987263b57c7ab6c3d74425e54", - "reference": "fab005d994b5ed7987263b57c7ab6c3d74425e54", + "url": "https://api.github.com/repos/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem/zipball/f0928d44d435afaab79f1154fa61352b376d2f29", + "reference": "f0928d44d435afaab79f1154fa61352b376d2f29", "shasum": "" }, "require": { @@ -2460,14 +2460,13 @@ "php-di/php-di": "^6.0" }, "require-dev": { - "10up/wp_mock": "dev-master", - "friendsofphp/php-cs-fixer": "^2.18", + "10up/wp_mock": "^0.5.0", + "friendsofphp/php-cs-fixer": "^3.0", "mockery/mockery": "^1.0", "phpstan/phpstan": "^0.12", "phpunit/phpunit": "^9.0", "szepeviktor/phpstan-wordpress": "^0.6.0" }, - "default-branch": true, "type": "wordpress-plugin", "autoload": { "psr-4": { @@ -2499,10 +2498,10 @@ ], "description": "Combine one or more 'zaaksystemen' with Gravity Forms and WordPress", "support": { - "source": "https://github.com/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem/tree/develop", + "source": "https://github.com/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem/tree/feat/remove-enable-u-add-individual-service-urls", "issues": "https://github.com/OpenWebconcept/plugin-owc-gravityforms-zaaksysteem/issues" }, - "time": "2023-09-20T14:40:52+00:00" + "time": "2023-10-24T07:11:39+00:00" }, { "name": "plugin/owc-gravityforms-zaaksysteem-enable-u", diff --git a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/editor.scss b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/editor.scss index 51fb76f6..8d5a17f5 100644 --- a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/editor.scss +++ b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/editor.scss @@ -9,4 +9,3 @@ Parent theme --------------------------------------------------------------*/ @import '../../../owc-formulieren/assets/scss/editor'; -@import 'settings/root'; diff --git a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_bootstrap.scss b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_bootstrap.scss index 01100fb3..95ddcc4d 100644 --- a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_bootstrap.scss +++ b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_bootstrap.scss @@ -96,3 +96,8 @@ $input-border-radius: 0; --------------------------------------------------------------*/ $transition-timing: cubic-bezier( 0.22, 1, 0.36, 1 ); // EaseOutQuint $transition-base: all 0.5s $transition-timing; // EaseOutQuint + +/*-------------------------------------------------------------- + Dropdown +--------------------------------------------------------------*/ +$dropdown-border-radius: $theme-border-radius; diff --git a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_colors.scss b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_colors.scss index 0c6e561a..83dbfe17 100644 --- a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_colors.scss +++ b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_colors.scss @@ -5,7 +5,7 @@ $theme-colors: ( primary: #244c96, secondary: #e21d1d, -); +) !default; $primary-light: #758bc0; $gray-light: #f9f9f9; diff --git a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_root.scss b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_root.scss deleted file mode 100644 index 1e661189..00000000 --- a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_root.scss +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --color-palette-primary: #{theme-color( 'primary' )}; - --color-palette-secondary: #{theme-color( 'secondary' )}; - --color-palette-white: #fff; - --color-palette-black: #000; - --layout-content-size: 800px; - --layout-wide-size: #{map-get( $container-max-widths, 'xl' )}; -} diff --git a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_variables.scss b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_variables.scss index 208ecb31..598b80b8 100644 --- a/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_variables.scss +++ b/htdocs/wp-content/themes/baralbrandswaard/assets/scss/settings/_variables.scss @@ -1,3 +1,9 @@ $navbar-height: 110px; $navbar-height-desktop: 110px; $navbar-shadow: $box-shadow; + +/* -------------------------------------------------------------- + Mijn Zaken: footer +-------------------------------------------------------------- */ +$mijn-zaken-footer-color: #fff !default; +$mijn-zaken-footer-bg-color: #244c96 !default; diff --git a/htdocs/wp-content/themes/baralbrandswaard/src/setup.php b/htdocs/wp-content/themes/baralbrandswaard/src/setup.php index af643f87..bc11a30b 100644 --- a/htdocs/wp-content/themes/baralbrandswaard/src/setup.php +++ b/htdocs/wp-content/themes/baralbrandswaard/src/setup.php @@ -40,6 +40,8 @@ // This theme uses wp_nav_menu() in one location. register_nav_menus([ 'primary' => __('Primary Menu', 'baralbrandswaard'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'openpdd-hoeksche-waard'), + 'footer-bottom' => __('Footer bottom', 'openpdd-hoeksche-waard'), ]); }); @@ -50,17 +52,18 @@ */ add_filter('yard/config-expander/config/admin', function ($defaults) { $defaults['DISABLE_REST_API'] = false; + return $defaults; }); add_filter('owc/config-expander/rest-api/whitelist', function ($endpoints_whitelist) { $endpoints_whitelist['/irma/v1/gf/handle'] = [ 'endpoint_stub' => '/irma/v1/gf/handle', - 'methods' => ['POST'] + 'methods' => ['POST'], ]; $endpoints_whitelist['/irma/v1/gf/session'] = [ 'endpoint_stub' => '/irma/v1/gf/session', - 'methods' => ['GET'] + 'methods' => ['GET'], ]; return $endpoints_whitelist; diff --git a/htdocs/wp-content/themes/baralbrandswaard/templates/template-mijn-zaken.php b/htdocs/wp-content/themes/baralbrandswaard/templates/template-mijn-zaken.php new file mode 100644 index 00000000..b4bf1d38 --- /dev/null +++ b/htdocs/wp-content/themes/baralbrandswaard/templates/template-mijn-zaken.php @@ -0,0 +1,18 @@ + +
    + +
    + +
    +
    + __('Primary Menu', 'barbarendrecht'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'openpdd-hoeksche-waard'), + 'footer-bottom' => __('Footer bottom', 'openpdd-hoeksche-waard'), ]); }); @@ -50,17 +52,18 @@ */ add_filter('yard/config-expander/config/admin', function ($defaults) { $defaults['DISABLE_REST_API'] = false; + return $defaults; }); add_filter('owc/config-expander/rest-api/whitelist', function ($endpoints_whitelist) { $endpoints_whitelist['/irma/v1/gf/handle'] = [ 'endpoint_stub' => '/irma/v1/gf/handle', - 'methods' => ['POST'] + 'methods' => ['POST'], ]; $endpoints_whitelist['/irma/v1/gf/session'] = [ 'endpoint_stub' => '/irma/v1/gf/session', - 'methods' => ['GET'] + 'methods' => ['GET'], ]; return $endpoints_whitelist; diff --git a/htdocs/wp-content/themes/barbarendrecht/templates/template-mijn-zaken.php b/htdocs/wp-content/themes/barbarendrecht/templates/template-mijn-zaken.php new file mode 100644 index 00000000..b4bf1d38 --- /dev/null +++ b/htdocs/wp-content/themes/barbarendrecht/templates/template-mijn-zaken.php @@ -0,0 +1,18 @@ + +
    + +
    + +
    +
    + __('Primary Menu', 'barridderkerk'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'openpdd-hoeksche-waard'), + 'footer-bottom' => __('Footer bottom', 'openpdd-hoeksche-waard'), ]); }); @@ -50,17 +52,18 @@ */ add_filter('yard/config-expander/config/admin', function ($defaults) { $defaults['DISABLE_REST_API'] = false; + return $defaults; }); add_filter('owc/config-expander/rest-api/whitelist', function ($endpoints_whitelist) { $endpoints_whitelist['/irma/v1/gf/handle'] = [ 'endpoint_stub' => '/irma/v1/gf/handle', - 'methods' => ['POST'] + 'methods' => ['POST'], ]; $endpoints_whitelist['/irma/v1/gf/session'] = [ 'endpoint_stub' => '/irma/v1/gf/session', - 'methods' => ['GET'] + 'methods' => ['GET'], ]; return $endpoints_whitelist; diff --git a/htdocs/wp-content/themes/barridderkerk/templates/template-mijn-zaken.php b/htdocs/wp-content/themes/barridderkerk/templates/template-mijn-zaken.php new file mode 100644 index 00000000..b4bf1d38 --- /dev/null +++ b/htdocs/wp-content/themes/barridderkerk/templates/template-mijn-zaken.php @@ -0,0 +1,18 @@ + +
    + +
    + +
    +
    +send(); }); @@ -57,6 +57,7 @@ function is_rest() // (#4) $rest_url = wp_parse_url(trailingslashit(rest_url())); $current_url = wp_parse_url(add_query_arg([ ])); + return (strpos($current_url['path'], $rest_url['path'], 0) === 0); } @@ -94,23 +95,9 @@ function is_rest() return dirname($stylesheet); }); -add_action('after_switch_theme', function () { - $stylesheet = get_option('template'); - if ('templates' !== basename($stylesheet)) { - update_option('template', $stylesheet . '/templates'); - } -}); - add_action('wp_enqueue_scripts', 'App\Assets\Assets::enqueueScripts'); add_action('enqueue_block_editor_assets', 'App\Assets\Assets::enqueueBlockEditorScripts'); -add_action('after_switch_theme', function () { - $stylesheet = get_option('template'); - if ('templates' !== basename($stylesheet)) { - update_option('template', $stylesheet . '/templates'); - } -}); - /** * Remove Gravity Forms styling */ @@ -166,6 +153,7 @@ function is_rest() */ add_filter('gform_incomplete_submissions_expiration_days', function ($expiration_days) { $expiration_days = 7; + return $expiration_days; }); @@ -259,7 +247,7 @@ function is_rest() $caps = array_merge($caps, $role->getGravityFormsCaps()); foreach ($caps as $cap) { - if (!$role->getRole()->has_cap($cap)) { + if (! $role->getRole()->has_cap($cap)) { $role->addCap($cap); } } @@ -294,7 +282,7 @@ function is_rest() */ function theme_script_loader_tag($tag, $handle) { - if (!is_admin()) { + if (! is_admin()) { $scripts_to_load = [ [ ('name') => 'jquery', @@ -303,11 +291,11 @@ function theme_script_loader_tag($tag, $handle) [ ('name') => 'jquery-ui-core', ('integrity') => 'sha384-4D3G3GikQs6hLlLZGdz5wLFzuqE9v4yVGAcOH86y23JqBDPzj9viv0EqyfIa6YUL', - ] + ], ]; - + $key = array_search($handle, array_column($scripts_to_load, 'name')); - + if (false !== $key) { $tag = str_replace('>', ' integrity=\'' . $scripts_to_load[$key]['integrity'] . '\' crossorigin=\'anonymous\'>', $tag); } diff --git a/htdocs/wp-content/themes/buren/src/setup.php b/htdocs/wp-content/themes/buren/src/setup.php index f5c18d08..ebb302e0 100644 --- a/htdocs/wp-content/themes/buren/src/setup.php +++ b/htdocs/wp-content/themes/buren/src/setup.php @@ -1,4 +1,6 @@ - __('Primary Menu', 'openpdd-buren'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'openpdd-buren'), + 'footer-bottom' => __('Footer bottom', 'openpdd-buren'), ]); + + $sidebars = [ + [ + 'name' => __('Footer column 1', 'openpdd-buren'), + 'id' => 'footer-1', + 'description' => '', + 'class' => '', + ], + [ + 'name' => __('Footer column 2', 'openpdd-buren'), + 'id' => 'footer-2', + 'description' => '', + 'class' => '', + ], + [ + 'name' => __('Footer column 3', 'openpdd-buren'), + 'id' => 'footer-3', + 'description' => '', + 'class' => '', + ], + ]; + + foreach ($sidebars as $sidebar) { + register_sidebar([ + 'name' => $sidebar['name'], + 'id' => $sidebar['id'], + 'description' => $sidebar['description'], + 'class' => $sidebar['class'], + 'before_widget' => '
    ', + 'after_widget' => '
    ', + ]); + } }); add_filter('automatic_updates_is_vcs_checkout', '__return_false', 10, 2); @@ -48,17 +84,18 @@ */ add_filter('yard/config-expander/config/admin', function ($defaults) { $defaults['DISABLE_REST_API'] = false; + return $defaults; }); add_filter('owc/config-expander/rest-api/whitelist', function ($endpoints_whitelist) { $endpoints_whitelist['/irma/v1/gf/handle'] = [ 'endpoint_stub' => '/irma/v1/gf/handle', - 'methods' => ['POST'] + 'methods' => ['POST'], ]; $endpoints_whitelist['/irma/v1/gf/session'] = [ 'endpoint_stub' => '/irma/v1/gf/session', - 'methods' => ['GET'] + 'methods' => ['GET'], ]; return $endpoints_whitelist; diff --git a/htdocs/wp-content/themes/buren/templates/template-mijn-zaken.php b/htdocs/wp-content/themes/buren/templates/template-mijn-zaken.php new file mode 100644 index 00000000..b4bf1d38 --- /dev/null +++ b/htdocs/wp-content/themes/buren/templates/template-mijn-zaken.php @@ -0,0 +1,18 @@ + +
    + +
    + +
    +
    + .menu-item { + display: flex; + height: $navbar-height-desktop; + align-items: center; + &::before { position: absolute; - bottom: -8px; + bottom: 25%; left: 10%; width: 80%; height: 3px; background-color: theme-color( 'primary' ); content: ''; transform: scaleX( 0 ); - transition: all 0.4s ease-in-out; + transition: all 0.3s ease; visibility: hidden; } @@ -23,15 +41,49 @@ visibility: visible; } } + } - a { - color: theme-color( 'secondary' ); - font-size: $font-size-base; - font-weight: $font-weight-bold; + .menu-item-has-children > a { + &::after { + @include fontawesome( '\f078' ); + margin-left: 0.5rem; + font-size: 0.8rem; + } + } - @include hover-focus-active() { - text-decoration: none; + .sub-menu { + min-width: 25rem; + border-bottom: 5px solid theme-color( 'primary' ); + box-shadow: $box-shadow; + transform: translateY( -15px ); + transition: all 0.3s ease; + + .menu-item a { + display: block; + padding: 0.75rem 1.5rem; + + &::before { + position: absolute; + right: 1.5rem; + bottom: 0; + left: 1.5rem; + height: 1px; + background-color: gray( 'concrete' ); + content: ''; + } + + @include hover-focus-active { + background-color: theme-color( 'secondary' ); + color: $white; + + &::before { + background-color: theme-color( 'secondary' ); + } } } } + + .show-sub-menu .sub-menu { + transform: translateY( 0 ); + } } diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/editor.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/editor.scss index 7d566397..0074343c 100644 --- a/htdocs/wp-content/themes/hoekschewaard/assets/scss/editor.scss +++ b/htdocs/wp-content/themes/hoekschewaard/assets/scss/editor.scss @@ -1,13 +1,17 @@ /*-------------------------------------------------------------- Settings --------------------------------------------------------------*/ -@import '~ParentTheme/assets/scss/editor'; @import 'settings/colors'; @import 'settings/bootstrap'; @import 'settings/root'; +/*-------------------------------------------------------------- + Parent theme +--------------------------------------------------------------*/ +@import '~ParentTheme/assets/scss/editor'; + .editor-styles-wrapper { - background-color: $body-bg; + background-color: $white; font-family: $font-family-base; font-size: $font-size-base; font-weight: $font-weight-base; diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/generic/_heading.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/generic/_heading.scss deleted file mode 100644 index 59a85b54..00000000 --- a/htdocs/wp-content/themes/hoekschewaard/assets/scss/generic/_heading.scss +++ /dev/null @@ -1,20 +0,0 @@ -h1, -.h1 { - animation-duration: 0.7s; - animation-name: fade-up; - animation-timing-function: ease; - color: theme-color( 'secondary' ); - font-weight: 700; -} - -@keyframes fade-up { - 0% { - opacity: 0; - transform: translateY( 30px ); - } - - 100% { - opacity: 1; - transform: translateY( 0px ); - } -} diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_bootstrap.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_bootstrap.scss index 39bdb667..dab17c14 100644 --- a/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_bootstrap.scss +++ b/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_bootstrap.scss @@ -1,5 +1,5 @@ /*-------------------------------------------------------------- - Fonts + Typography --------------------------------------------------------------*/ $font-size-base: 1.125rem; $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, @@ -8,11 +8,39 @@ $font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, $font-family-base: 'Ubuntu', $font-family-sans-serif; $line-height-base: 1.7; $enable-responsive-font-sizes: true; -$font-weight-base: 300; +$font-weight-base: 400; -$h1-font-size: $font-size-base * 2; -$h2-font-size: $font-size-base * 1.5; -$h3-font-size: $font-size-base * 1.3; -$h4-font-size: $font-size-base * 1.2; -$h5-font-size: $font-size-base * 1.1; +$h1-font-size: 2rem; +$h2-font-size: 1.5rem; +$h3-font-size: 1.3rem; +$h4-font-size: 1.2rem; +$h5-font-size: $font-size-base; $h6-font-size: $font-size-base; + +$headings-font-weight: 700; +$headings-color: $secondary-400; + +/*-------------------------------------------------------------- + Links +--------------------------------------------------------------*/ +$link-color: $green-400; + +/*-------------------------------------------------------------- + Grid containers +--------------------------------------------------------------*/ +$container-max-widths: ( + sm: 540px, + md: 720px, + lg: 960px, + xl: 1080px, +); + +/*-------------------------------------------------------------- + Buttons +--------------------------------------------------------------*/ +$btn-padding-y: 0.625rem; +$btn-padding-x: 1rem; +$btn-border-width: 0; +$btn-border-radius: 3px; +$btn-font-weight: 400; +$btn-line-height: 1.5; diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_colors.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_colors.scss index 47737cea..52801877 100644 --- a/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_colors.scss +++ b/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_colors.scss @@ -1,9 +1,19 @@ /*-------------------------------------------------------------- - Custom colors + Colors --------------------------------------------------------------*/ +$green-400: #328725; +$secondary-100: #e9efff; +$secondary-200: #4d6eb9; +$secondary-300: #001d5f; +$secondary-400: #000e2f; +$yellow-400: #f8d62d; + +$black: #000000; +$white: #ffffff; + +$link-color: $secondary-200; $theme-colors: ( - primary: #2f881b, - secondary: #001e60, - tertiary: #2f881b, + primary: $green-400, + secondary: $secondary-400, ); diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/generic/_typography.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_typography.scss similarity index 100% rename from htdocs/wp-content/themes/hoekschewaard/assets/scss/generic/_typography.scss rename to htdocs/wp-content/themes/hoekschewaard/assets/scss/settings/_typography.scss diff --git a/htdocs/wp-content/themes/hoekschewaard/assets/scss/style.scss b/htdocs/wp-content/themes/hoekschewaard/assets/scss/style.scss index 0bbda273..e089108c 100644 --- a/htdocs/wp-content/themes/hoekschewaard/assets/scss/style.scss +++ b/htdocs/wp-content/themes/hoekschewaard/assets/scss/style.scss @@ -3,6 +3,8 @@ --------------------------------------------------------------*/ @import 'settings/colors'; @import 'settings/bootstrap'; +@import 'settings/root'; +@import 'settings/typography'; /*-------------------------------------------------------------- Parent theme @@ -12,11 +14,6 @@ /*-------------------------------------------------------------- Components --------------------------------------------------------------*/ +@import 'components/footer'; @import 'components/gravityforms'; @import 'components/navbar'; - -/*-------------------------------------------------------------- - Generic ---------------------------------------------------------------*/ -@import 'generic/typography'; -@import 'generic/heading'; diff --git a/htdocs/wp-content/themes/hoekschewaard/functions.php b/htdocs/wp-content/themes/hoekschewaard/functions.php index 88f71173..e10b85b2 100644 --- a/htdocs/wp-content/themes/hoekschewaard/functions.php +++ b/htdocs/wp-content/themes/hoekschewaard/functions.php @@ -43,3 +43,7 @@ return str_replace('[gravityforms', '

    Dit formulier werkt helaas niet in de browser die u momenteel gebruikt. Open het formulier in Edge of Chrome om uw aanvraag te voltooien.

    [gravityforms', $content); }); + +add_action('admin_init', function() { + new App\Navigation\NavigationMetaFields(); +}); \ No newline at end of file diff --git a/htdocs/wp-content/themes/hoekschewaard/src/hooks.php b/htdocs/wp-content/themes/hoekschewaard/src/hooks.php index d08779b1..9ae6c9fd 100644 --- a/htdocs/wp-content/themes/hoekschewaard/src/hooks.php +++ b/htdocs/wp-content/themes/hoekschewaard/src/hooks.php @@ -97,13 +97,6 @@ function is_rest() return dirname($stylesheet); }); -add_action('after_switch_theme', function () { - $stylesheet = get_option('template'); - if ('templates' !== basename($stylesheet)) { - update_option('template', $stylesheet . '/templates'); - } -}); - add_action('init', function () { $labels = [ 'name' => _x('Owner', 'taxonomy general name', 'openpdd-hoeksche-waard'), @@ -159,13 +152,6 @@ function is_rest() add_action('wp_enqueue_scripts', 'App\Assets\Assets::enqueueScripts'); add_action('enqueue_block_editor_assets', 'App\Assets\Assets::enqueueBlockEditorScripts'); -add_action('after_switch_theme', function () { - $stylesheet = get_option('template'); - if ('templates' !== basename($stylesheet)) { - update_option('template', $stylesheet . '/templates'); - } -}); - /** * Remove Gravity Forms styling */ diff --git a/htdocs/wp-content/themes/hoekschewaard/src/setup.php b/htdocs/wp-content/themes/hoekschewaard/src/setup.php index 92303a95..43111fd0 100644 --- a/htdocs/wp-content/themes/hoekschewaard/src/setup.php +++ b/htdocs/wp-content/themes/hoekschewaard/src/setup.php @@ -37,8 +37,43 @@ // This theme uses wp_nav_menu() in one location. register_nav_menus([ - 'primary' => __('Primary Menu', 'openpdd-hoeksche-waard'), + 'primary' => __('Primary Menu', 'openpdd-hoeksche-waard'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'openpdd-hoeksche-waard'), + 'footer-bottom' => __('Footer bottom', 'openpdd-hoeksche-waard'), + 'sidenav-mijn-zaken' => __('Side-menu Mijn zaken', 'yard-startertheme'), ]); + + $sidebars = [ + [ + 'name' => __('Footer column 1', 'openpdd-hoeksche-waard'), + 'id' => 'footer-1', + 'description' => '', + 'class' => '', + ], + [ + 'name' => __('Footer column 2', 'openpdd-hoeksche-waard'), + 'id' => 'footer-2', + 'description' => '', + 'class' => '', + ], + [ + 'name' => __('Footer column 3', 'openpdd-hoeksche-waard'), + 'id' => 'footer-3', + 'description' => '', + 'class' => '', + ], + ]; + + foreach ($sidebars as $sidebar) { + register_sidebar([ + 'name' => $sidebar['name'], + 'id' => $sidebar['id'], + 'description' => $sidebar['description'], + 'class' => $sidebar['class'], + 'before_widget' => '
    ', + 'after_widget' => '
    ', + ]); + } }); add_filter('automatic_updates_is_vcs_checkout', '__return_false', 10, 2); diff --git a/htdocs/wp-content/themes/hoekschewaard/templates/template-fpe.php b/htdocs/wp-content/themes/hoekschewaard/templates/template-fpe.php deleted file mode 100644 index ebd46a04..00000000 --- a/htdocs/wp-content/themes/hoekschewaard/templates/template-fpe.php +++ /dev/null @@ -1,17 +0,0 @@ - - -
    - -
    - - +
    + +
    + +
    +
    + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-plus.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-plus.svg new file mode 100644 index 00000000..cccf29b5 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-settings.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-settings.svg new file mode 100644 index 00000000..41d4bcf1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/a-settings.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/alert-triangle.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/alert-triangle.svg new file mode 100644 index 00000000..eb965f55 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/alert-triangle.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/archive.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/archive.svg new file mode 100644 index 00000000..988f4621 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/archive.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-down.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-down.svg new file mode 100644 index 00000000..ec905736 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-left.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-left.svg new file mode 100644 index 00000000..25c9826b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-right.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-right.svg new file mode 100644 index 00000000..36f8e227 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-up.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-up.svg new file mode 100644 index 00000000..80561271 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/arrow-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/book.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/book.svg new file mode 100644 index 00000000..098d7136 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/book.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/calendar.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/calendar.svg new file mode 100644 index 00000000..fa25f5e5 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/calendar.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/call.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/call.svg new file mode 100644 index 00000000..1b5b62b5 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/call.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/card.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/card.svg new file mode 100644 index 00000000..5ce8adfa --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/card.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check-circle.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check-circle.svg new file mode 100644 index 00000000..35cfd3fd --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check.svg new file mode 100644 index 00000000..1d95e0bb --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/check.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-down.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-down.svg new file mode 100644 index 00000000..16f1c6cd --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-left.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-left.svg new file mode 100644 index 00000000..345c0f8a --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-right.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-right.svg new file mode 100644 index 00000000..94461c91 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-up.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-up.svg new file mode 100644 index 00000000..b0220cd6 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/chevron-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-check.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-check.svg new file mode 100644 index 00000000..3f073d6d --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-cross.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-cross.svg new file mode 100644 index 00000000..0dfd95ed --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-cross.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-help.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-help.svg new file mode 100644 index 00000000..92e6094c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-help.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-warning.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-warning.svg new file mode 100644 index 00000000..5921e241 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/circle-warning.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clipboard.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clipboard.svg new file mode 100644 index 00000000..757abdaa --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clipboard.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clock.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clock.svg new file mode 100644 index 00000000..c74e6ed4 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/clock.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/close.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/close.svg new file mode 100644 index 00000000..88a58840 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/computer.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/computer.svg new file mode 100644 index 00000000..f69e47f8 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/computer.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/corona.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/corona.svg new file mode 100644 index 00000000..ee672be7 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/corona.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/delete.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/delete.svg new file mode 100644 index 00000000..c4b06d2e --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/delete.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/document.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/document.svg new file mode 100644 index 00000000..2bb2fdee --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/document.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/download.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/download.svg new file mode 100644 index 00000000..fd5bb78c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/download.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/edit.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/edit.svg new file mode 100644 index 00000000..120f0938 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/edit.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/email.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/email.svg new file mode 100644 index 00000000..859f7805 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/enter.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/enter.svg new file mode 100644 index 00000000..43c9c9ba --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/enter.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/erfpacht.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/erfpacht.svg new file mode 100644 index 00000000..e16c1752 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/erfpacht.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/euro.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/euro.svg new file mode 100644 index 00000000..a4311201 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/euro.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/expand.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/expand.svg new file mode 100644 index 00000000..f81c6953 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/expand.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/external-link.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/external-link.svg new file mode 100644 index 00000000..eaa595cd --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/external-link.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/facebook.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/facebook.svg new file mode 100644 index 00000000..81060cfc --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/filter.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/filter.svg new file mode 100644 index 00000000..09948aa0 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/filter.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/grid.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/grid.svg new file mode 100644 index 00000000..515bf0f1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/grid.svg @@ -0,0 +1,5 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hamburger.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hamburger.svg new file mode 100644 index 00000000..8150bf1e --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hide.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hide.svg new file mode 100644 index 00000000..f43f05f1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/hide.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/house.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/house.svg new file mode 100644 index 00000000..910213bf --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/house.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/inbox.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/inbox.svg new file mode 100644 index 00000000..56e28019 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/inbox.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/info.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/info.svg new file mode 100644 index 00000000..95b0b541 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/instagram.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/instagram.svg new file mode 100644 index 00000000..9ee2ab4f --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-alt.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-alt.svg new file mode 100644 index 00000000..c5b40815 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-alt.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-cmd.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-cmd.svg new file mode 100644 index 00000000..54cecb8d --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-cmd.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-control.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-control.svg new file mode 100644 index 00000000..a205fa12 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-control.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-shift.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-shift.svg new file mode 100644 index 00000000..04061222 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard-shift.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard.svg new file mode 100644 index 00000000..eb4645e1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/keyboard.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/linkedin.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/linkedin.svg new file mode 100644 index 00000000..c7e7c748 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/linkedin.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list-2.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list-2.svg new file mode 100644 index 00000000..70816347 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list-2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list.svg new file mode 100644 index 00000000..2a5646b8 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/list.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/location.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/location.svg new file mode 100644 index 00000000..27da506b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/location.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/log-out.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/log-out.svg new file mode 100644 index 00000000..3a045c5b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/log-out.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map-pin.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map-pin.svg new file mode 100644 index 00000000..1588eec7 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map-pin.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map.svg new file mode 100644 index 00000000..3bd6a5e0 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/map.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-next.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-next.svg new file mode 100644 index 00000000..ca007886 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-next.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-pause.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-pause.svg new file mode 100644 index 00000000..f9e10022 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-play.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-play.svg new file mode 100644 index 00000000..dadf3c7a --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-play.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-previous.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-previous.svg new file mode 100644 index 00000000..3cf41567 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-previous.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-shuffle.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-shuffle.svg new file mode 100644 index 00000000..fc99667d --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-shuffle.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-stop.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-stop.svg new file mode 100644 index 00000000..dd9445d8 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/media-stop.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/megaphone.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/megaphone.svg new file mode 100644 index 00000000..7a9da0de --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/megaphone.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message-alt.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message-alt.svg new file mode 100644 index 00000000..2e110f3e --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message-alt.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message.svg new file mode 100644 index 00000000..cb3f5df9 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/message.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/minus.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/minus.svg new file mode 100644 index 00000000..ae5a1058 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/minus.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/mobile.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/mobile.svg new file mode 100644 index 00000000..91682458 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/mobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/parking.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/parking.svg new file mode 100644 index 00000000..1567b02c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/parking.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/plus.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/plus.svg new file mode 100644 index 00000000..80356a78 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/plus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/print.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/print.svg new file mode 100644 index 00000000..24e24608 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/print.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/refresh.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/refresh.svg new file mode 100644 index 00000000..801ecd25 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/refresh.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/repeat.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/repeat.svg new file mode 100644 index 00000000..db56a606 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/repeat.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/return.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/return.svg new file mode 100644 index 00000000..266b38f3 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/return.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/search.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/search.svg new file mode 100644 index 00000000..687c16d0 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/settings.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/settings.svg new file mode 100644 index 00000000..aa316295 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share-2.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share-2.svg new file mode 100644 index 00000000..40ada286 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share-2.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share.svg new file mode 100644 index 00000000..ee58990c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/share.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/show.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/show.svg new file mode 100644 index 00000000..2e06d5e4 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/show.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed-2.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed-2.svg new file mode 100644 index 00000000..306b46c1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed-2.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed.svg new file mode 100644 index 00000000..9e91bbf9 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/speed.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/spinner.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/spinner.svg new file mode 100644 index 00000000..8c05e9f4 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/spinner.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/star.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/star.svg new file mode 100644 index 00000000..c4a094f7 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/starter.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/starter.svg new file mode 100644 index 00000000..655a7bb6 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/starter.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/twitter.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/twitter.svg new file mode 100644 index 00000000..be88cc66 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/undo.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/undo.svg new file mode 100644 index 00000000..110aff0f --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/undo.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/upload.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/upload.svg new file mode 100644 index 00000000..5d1b2add --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/upload.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user-logged-in.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user-logged-in.svg new file mode 100644 index 00000000..df9ce2ac --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user-logged-in.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user.svg new file mode 100644 index 00000000..bef13310 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/users.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/users.svg new file mode 100644 index 00000000..5ea2ff5b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/users.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-off.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-off.svg new file mode 100644 index 00000000..d8a97e69 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-off.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-up.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-up.svg new file mode 100644 index 00000000..50b122a4 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/volume-up.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/whatsapp.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/whatsapp.svg new file mode 100644 index 00000000..ade40f11 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/whatsapp.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/woz.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/woz.svg new file mode 100644 index 00000000..4e392c0d --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/woz.svg @@ -0,0 +1,4 @@ + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/x.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/x.svg new file mode 100644 index 00000000..d35e6603 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/x.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/youtube.svg b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/youtube.svg new file mode 100644 index 00000000..e4473bb1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/img/icons/youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/README.MD b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/README.MD new file mode 100644 index 00000000..13743405 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/README.MD @@ -0,0 +1,7 @@ +# Affairs block + +Add an affairs list for use in the OpenPDD + +## Wait, where is the styling? + +Styling is situated in the `"/assets/scss/blocks/affairs"` folder. diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/block.json b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/block.json new file mode 100644 index 00000000..e9a86a96 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/block.json @@ -0,0 +1,14 @@ +{ + "name": "theme/affairs", + "category": "layout", + "attributes": { + "icon": { + "type": "string", + "default": "fal fa-envelope" + }, + "altText": { + "type": "string", + "default": "" + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/components/icons.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/components/icons.js new file mode 100644 index 00000000..471ad4b9 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/components/icons.js @@ -0,0 +1,15 @@ +export const ArrowRightIcon = () => { + return ( + + + + ); +}; + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/edit.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/edit.js new file mode 100644 index 00000000..841124e8 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/edit.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +const Edit = ( props ) => { + const blockProps = useBlockProps( { + className: 'openpdd-affairs', + } ); + + return ( +
    + Zaken blok, back-end volgt. +
    + ); +}; + +export default Edit; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/index.js new file mode 100644 index 00000000..fe3f4304 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/index.js @@ -0,0 +1,39 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name, attributes } = metadata; + +const settings = { + apiVersion: 2, + title: __( 'OpenPDD - Mijn Zaken' ), + description: __( + 'Toon OpenPDD \'Mijn zaken\'' + ), + category: 'theme', + keywords: [ + __( 'affairs', 'owc-formulieren' ), + __( 'zaken', 'owc-formulieren' ), + __( 'mijn zaken', 'owc-formulieren' ), + __( 'openpdd', 'owc-formulieren' ), + ], + icon: { + src: 'editor-ul', + background: '#fff', + foreground: '#000', + }, + edit, + save, + attributes, +}; + +registerBlockType( name, settings ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/save.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/save.js new file mode 100644 index 00000000..3d593d45 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/affairs/save.js @@ -0,0 +1,91 @@ +/** + * Internal dependencies + */ +import {ArrowRightIcon} from './components/icons'; + +const Save = (props) => { + + return ( +
    +

    + Mijn lopende zaken +

    + + + + + Bekijk alle zaken + + +
    + ); +}; + +export default Save; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/block-styles/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/block-styles/index.js new file mode 100644 index 00000000..0ad3ee64 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/block-styles/index.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies + */ +import { registerBlockStyle } from '@wordpress/blocks'; +import domReady from '@wordpress/dom-ready'; + +const listStyles = [ + { + label: 'Pijlen', + name: 'arrows', + }, +]; + +domReady( () => { + // Register styles + registerBlockStyle( 'core/list', listStyles ); +} ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/index.js index 0a51fe0e..636060bf 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/index.js +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/index.js @@ -1 +1,7 @@ import './tile'; +import './block-styles'; +import './sidemenu'; +import './tasks'; +import './affairs'; +import './news'; +import './personal-heading'; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/README.MD b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/README.MD new file mode 100644 index 00000000..ec86d1b1 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/README.MD @@ -0,0 +1,7 @@ +# News block + +Add news cards for use in the OpenPDD + +## Wait, where is the styling? + +Styling is situated in the `"/assets/scss/blocks/news"` folder. diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/block.json b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/block.json new file mode 100644 index 00000000..3d21c412 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/block.json @@ -0,0 +1,14 @@ +{ + "name": "theme/news", + "category": "layout", + "attributes": { + "icon": { + "type": "string", + "default": "fal fa-envelope" + }, + "altText": { + "type": "string", + "default": "" + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/components/icons.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/components/icons.js new file mode 100644 index 00000000..0979f2dc --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/components/icons.js @@ -0,0 +1,14 @@ +export const ArrowRightIcon = () => { + return ( + + + + ); +}; \ No newline at end of file diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/edit.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/edit.js new file mode 100644 index 00000000..7a191153 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/edit.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +const Edit = ( props ) => { + const blockProps = useBlockProps( { + className: 'openpdd-news', + } ); + + return ( +
    + Nieuws blok, data komt uit OpenPub. +
    + ); +}; + +export default Edit; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/index.js new file mode 100644 index 00000000..d9022778 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name, attributes } = metadata; + +const settings = { + apiVersion: 2, + title: __( 'OpenPDD - Nieuws' ), + description: __( + 'Toon OpenPDD nieuws' + ), + category: 'theme', + keywords: [ + __( 'news', 'owc-formulieren' ), + __( 'nieuws', 'owc-formulieren' ), + __( 'openpdd', 'owc-formulieren' ), + ], + icon: { + src: 'editor-ul', + background: '#fff', + foreground: '#000', + }, + edit, + save, + attributes, +}; + +registerBlockType( name, settings ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/save.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/save.js new file mode 100644 index 00000000..1347f049 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/news/save.js @@ -0,0 +1,9 @@ +const Save = (props) => { + + // This data will be fetched from the OpenPUB API. The function for this can be found in /assets/js/frontend/components/fetch-openpub-data.js. + return ( +
      + ); +}; + +export default Save; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/README.MD b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/README.MD new file mode 100644 index 00000000..73e6aadf --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/README.MD @@ -0,0 +1,7 @@ +# Personal heading block + +Adds a personal heading block. + +## Wait, where is the styling? + +Styling is situated in the `"/assets/scss/blocks/personal-heading"` folder. diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/block.json b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/block.json new file mode 100644 index 00000000..328e1ea8 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/block.json @@ -0,0 +1,14 @@ +{ + "name": "theme/personal-heading", + "category": "layout", + "attributes": { + "icon": { + "type": "string", + "default": "fal fa-envelope" + }, + "altText": { + "type": "string", + "default": "" + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/edit.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/edit.js new file mode 100644 index 00000000..e827d08a --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/edit.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +const Edit = ( props ) => { + const blockProps = useBlockProps( { + className: 'openpdd-personal-heading', + } ); + + return ( +
      + Persoonlijke header blok, back-end volgt. +
      + ); +}; + +export default Edit; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/index.js new file mode 100644 index 00000000..ebc33a27 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name, attributes } = metadata; + +const settings = { + apiVersion: 2, + title: __( 'OpenPDD - Persoonlijke heading' ), + description: __( + 'Toon een persoonlijke heading' + ), + category: 'theme', + keywords: [ + __( 'heading', 'owc-formulieren' ), + __( 'personal', 'owc-formulieren' ), + __( 'header', 'owc-formulieren' ), + ], + icon: { + src: 'editor-ul', + background: '#fff', + foreground: '#000', + }, + edit, + save, + attributes, +}; + +registerBlockType( name, settings ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/save.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/save.js new file mode 100644 index 00000000..78c9f6cd --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/personal-heading/save.js @@ -0,0 +1,24 @@ +const Save = (props) => { + + return ( +
      +
      +

      + Goedemorgen Brigitta! +

      +

      + Alle voor u relevante informatie van de gemeente op 1 plek! Dat is MijnHW. +

      +
      + +
      + Placeholder image +
      +
      + ); +}; + +export default Save; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/README.MD b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/README.MD new file mode 100644 index 00000000..7a696b06 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/README.MD @@ -0,0 +1,7 @@ +# Sidemenu block + +Adds an option to create a sidemenu block. + +## Wait, where is the styling? + +Styling is situated in the `"/assets/scss/blocks/sidemenu"` folder. diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/block.json b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/block.json new file mode 100644 index 00000000..3793d550 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/block.json @@ -0,0 +1,7 @@ +{ + "title" : "Side Menu", + "name" : "theme/openpdd-sidemenu", + "category" : "layout", + "attributes": { + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/components/icons.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/components/icons.js new file mode 100644 index 00000000..0ce72bee --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/components/icons.js @@ -0,0 +1,116 @@ +export const GridIcon = () => { + + return ( + + ); +}; + +export const InboxIcon = () => { + + return ( + + ); +}; + +export const DocumentIcon = () => { + + return ( + + + + + + + + + + + + + ); +}; + +export const MapIcon = () => { + return ( + + + + ); +}; + +export const UserIcon = () => { + return ( + + ); +}; + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/edit.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/edit.js new file mode 100644 index 00000000..a8a68500 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/edit.js @@ -0,0 +1,68 @@ +/** + * WordPress dependencies + */ +import {useBlockProps} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import {GridIcon, InboxIcon, DocumentIcon, MapIcon, UserIcon} from './components/icons'; + +const Edit = () => { + const blockProps = useBlockProps( { + className: 'pdd-sidemenu', + } ); + + return ( + + ); +}; + +export default Edit; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/index.js new file mode 100644 index 00000000..71ef1c16 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/index.js @@ -0,0 +1,37 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name, attributes } = metadata; + +const settings = { + apiVersion: 2, + title: __( 'OpenPDD - Sidemenu' ), + description: __( + 'Toon een OpenPDD sidemenu' + ), + category: 'theme', + keywords: [ + __( 'sidemenu', 'owc-formulieren' ), + __( 'menu', 'owc-formulieren' ), + ], + icon: { + src: 'menu', + background: '#fff', + foreground: '#000', + }, + edit, + save, + attributes, +}; + +registerBlockType( name, settings ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/save.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/save.js new file mode 100644 index 00000000..657855e9 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/sidemenu/save.js @@ -0,0 +1,68 @@ +/** + * WordPress dependencies + */ +import {InnerBlocks, useBlockProps} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import {GridIcon, InboxIcon, DocumentIcon, MapIcon, UserIcon} from './components/icons'; + +const Save = () => { + const blockProps = useBlockProps.save( { + className: 'openpdd-sidemenu', + } ); + + return ( + + ); +}; + +export default Save; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/README.MD b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/README.MD new file mode 100644 index 00000000..8fd020e5 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/README.MD @@ -0,0 +1,7 @@ +# Tasks block + +Add a tasks list for use in the OpenPDD + +## Wait, where is the styling? + +Styling is situated in the `"/assets/scss/blocks/tasks"` folder. diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/block.json b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/block.json new file mode 100644 index 00000000..8da6274b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/block.json @@ -0,0 +1,14 @@ +{ + "name": "theme/tasks", + "category": "layout", + "attributes": { + "icon": { + "type": "string", + "default": "fal fa-envelope" + }, + "altText": { + "type": "string", + "default": "" + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/components/icons.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/components/icons.js new file mode 100644 index 00000000..fde1a76c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/components/icons.js @@ -0,0 +1,66 @@ +export const ErrorIcon = () => { + return ( + + + + + + + + + + + + + ); +}; + +export const ArrowRightIcon = () => { + return ( + + + + ); +}; + +export const BellIcon = () => { + return ( + + + + ); +}; + + diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/edit.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/edit.js new file mode 100644 index 00000000..d998d06d --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/edit.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { useBlockProps } from '@wordpress/block-editor'; + +const Edit = ( props ) => { + const blockProps = useBlockProps( { + className: 'openpdd-tasks', + } ); + + return ( +
      + Taken blok, back-end volgt. +
      + ); +}; + +export default Edit; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/index.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/index.js new file mode 100644 index 00000000..aa3fe264 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/index.js @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { registerBlockType } from '@wordpress/blocks'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import save from './save'; + +const { name, attributes } = metadata; + +const settings = { + apiVersion: 2, + title: __( 'OpenPDD - Taken' ), + description: __( + 'Toon OpenPDD taken' + ), + category: 'theme', + keywords: [ + __( 'tasks', 'owc-formulieren' ), + __( 'taken', 'owc-formulieren' ), + __( 'openpdd', 'owc-formulieren' ), + ], + icon: { + src: 'editor-ul', + background: '#fff', + foreground: '#000', + }, + edit, + save, + attributes, +}; + +registerBlockType( name, settings ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/save.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/save.js new file mode 100644 index 00000000..a2910aee --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/editor/tasks/save.js @@ -0,0 +1,66 @@ +/** + * Internal dependencies + */ +import {ErrorIcon, ArrowRightIcon, BellIcon} from './components/icons'; + +const Save = (props) => { + + return ( +
      +

      + + Wat moet ik regelen? +

      + + +
      + ); +}; + +export default Save; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js index 3f937b8f..74dc2f67 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/app.js @@ -1,7 +1,13 @@ import A11yToolbar from './components/A11yToolbar'; +import Dropdown from './components/Dropdown'; +import Navigation from './components/Navigation'; +import fetchOpenPubData from './components/fetch-openpub-data'; const app = () => { A11yToolbar(); + Dropdown(); + Navigation(); + fetchOpenPubData( '7101', '.openpdd-news' ); }; document.addEventListener( 'DOMContentLoaded', app ); diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Dropdown.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Dropdown.js new file mode 100644 index 00000000..25bd4fd7 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Dropdown.js @@ -0,0 +1,66 @@ +export default () => { + const events = () => { + initDropdowns(); + }; + + const initDropdowns = () => { + const dropdowns = document.querySelectorAll( '.dropdown' ); + + dropdowns.forEach( initSingleDropdown ); + }; + + /** + * Initialize a single dropdown. + * + * @param {HTMLElement} dropdown - The dropdown element. + */ + const initSingleDropdown = ( dropdown ) => { + const dropdownButton = dropdown.querySelector( '.dropdown-toggle' ); + const dropdownMenu = dropdown.querySelector( '.dropdown-menu' ); + const dropdownButtonClose = dropdown.querySelector( + '.dropdown-button-close' + ); + + dropdownButton.addEventListener( 'click', () => { + toggleDropdown( dropdownMenu ); + } ); + + dropdown.ownerDocument.addEventListener( 'click', ( event ) => { + if ( ! dropdown.contains( event.target ) ) { + toggleDropdown( dropdownMenu, false ); + } + } ); + + dropdownMenu.addEventListener( 'blur', () => { + toggleDropdown( dropdownMenu, false ); + } ); + + dropdownButtonClose.addEventListener( 'click', () => { + toggleDropdown( dropdownMenu, false ); + } ); + }; + + /** + * Toggle the visibility of the dropdown menu and update ARIA attributes. + * + * @param {HTMLElement} dropdownMenu - The dropdown menu element. + * @param {boolean} [isOpen] - Flag indicating if the dropdown menu should be open (true) or closed (false). + */ + const toggleDropdown = ( dropdownMenu, isOpen ) => { + isOpen = + typeof isOpen === 'boolean' + ? isOpen + : ! dropdownMenu.classList.contains( 'show' ); + const dropdownButton = + dropdownMenu.parentElement.querySelector( '.dropdown-toggle' ); + + dropdownMenu.classList.toggle( 'show', isOpen ); + dropdownButton.setAttribute( + 'aria-expanded', + isOpen ? 'true' : 'false' + ); + dropdownMenu.setAttribute( 'aria-hidden', isOpen ? 'false' : 'true' ); + }; + + events(); +}; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Navigation.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Navigation.js new file mode 100644 index 00000000..e0881e16 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/Navigation.js @@ -0,0 +1,112 @@ +export default () => { + const navigationItems = document.querySelectorAll( + '.navbar-menu-list > .menu-item' + ); + const expandableNavigationItems = document.querySelectorAll( + '.navbar-menu-list > .menu-item-has-children' + ); + + const events = () => { + if ( ! navigationItems ) return; + + document.addEventListener( 'keyup', onKeyUp ); + document.addEventListener( 'click', onClickDocument ); + document.addEventListener( 'focusin', onFocusIn ); + + initExpandableMenuItems(); + }; + + /** + * A11y: Check if escape key is pressed, then close all expandable items and set focus to parent link + * + * @param {Event} event - The key up event + */ + const onKeyUp = ( event ) => { + if ( event.key !== 'Escape' ) return; + + closeAllExpandableMenuItems(); + + const item = event.target.closest( '.menu-item-has-children' ); + if ( ! item ) return; + + const link = item.querySelector( 'a' ); + link?.focus(); + }; + + /** + * Close expandable items if there is clicked somewhere which is not a menu item + * + * @param {Event} event - The click event + */ + const onClickDocument = ( event ) => { + const isClickedOutside = Array.from( navigationItems ).every( + ( item ) => ! item.contains( event.target ) + ); + + if ( ! isClickedOutside ) return; + + closeAllExpandableMenuItems(); + }; + + /** + * Close expandable items if the focus is somewhere which is not a sub menu + * + * @param {Event} event - The focusin event + */ + const onFocusIn = ( event ) => { + if ( event.target.closest( '.sub-menu' ) ) return; + + closeAllExpandableMenuItems(); + }; + + /** + * Initialize expandable menu items and add necessary aria attributes. + */ + const initExpandableMenuItems = () => { + expandableNavigationItems.forEach( ( item ) => { + const link = item.querySelector( 'a' ); + + link.setAttribute( 'aria-haspopup', 'true' ); + link.setAttribute( 'aria-expanded', 'false' ); + + link.addEventListener( 'click', ( event ) => + openExpandableMenuItem( event, item, link ) + ); + + item.addEventListener( 'mouseenter', ( event ) => + openExpandableMenuItem( event, item, link ) + ); + + item.addEventListener( 'mouseleave', closeAllExpandableMenuItems ); + } ); + }; + + /** + * Handle click/mouseenter event. Prevent opening link, add aria-expanded and toggle class. + * + * @param {Event} event - The click/mouseenter event + * @param {Element} item - The expandable item element + * @param {HTMLElement} link - The link element within the expandable item + */ + const openExpandableMenuItem = ( event, item, link ) => { + event.preventDefault(); + + const isOpen = link.getAttribute( 'aria-expanded' ) === 'true'; + link.setAttribute( 'aria-expanded', String( ! isOpen ) ); + + item.classList.toggle( 'show-sub-menu' ); + }; + + /** + * Close all expandable menu items. Set aria-expanded to false and remove active class. + */ + const closeAllExpandableMenuItems = () => { + expandableNavigationItems.forEach( ( item ) => { + const link = item.querySelector( 'a' ); + link.setAttribute( 'aria-expanded', 'false' ); + item.classList.remove( 'show-sub-menu' ); + } ); + }; + + events(); +}; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/fetch-openpub-data.js b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/fetch-openpub-data.js new file mode 100644 index 00000000..86d83b86 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/js/frontend/components/fetch-openpub-data.js @@ -0,0 +1,53 @@ +async function fetchFromOpenPub(zipcode, selector) { + try { + const response = await fetch( `https://openpub.gemeentehw.nl/wp-json/owc/openpub/v1/items?zipcode=${zipcode}` ); + const responseData = await response.json(); + + if (responseData && responseData.data) { + const list = document.querySelector( selector ); + list.innerHTML = responseData.data.map( listItem ).join( '' ); + } else { + console.warn( 'API Call to OpenPub was successful, but no data was returned.' ); + } + } catch (error) { + console.error( "Error while fetching data from OpenPub:", error ); + } +} + +const listItem = (item) => { + const dateOptions = {year: 'numeric', month: 'long', day: 'numeric'}; + + return ` +
    • +
      +
      +

      + + ${item.title} + +

      + + ${item.excerpt !== '' ? `

      ${item.excerpt}

      ` : ''} +
      + +
      +
      +
      + ${addClassToImage( item.image.rendered )} +
      +
      +
      • + `; +}; + +function addClassToImage(renderedHTML) { + return renderedHTML.replace( /class="/g, 'class="denhaag-card-news__image ' ); +} + +export default fetchFromOpenPub; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/affairs/_shared.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/affairs/_shared.scss new file mode 100644 index 00000000..05278ef2 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/affairs/_shared.scss @@ -0,0 +1,396 @@ +$breakpoint-sm: 576px; +$breakpoint-md: 820px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; + +.openpdd-affairs { + display: grid; + grid-gap: 1.5rem; + grid-template-areas: + 'title view-all' + 'cards cards'; + grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); + grid-template-rows: repeat( 2, auto ); + + @media ( max-width: $breakpoint-md ) { + grid-template-areas: + 'title' + 'view-all' + 'cards'; + grid-template-columns: 1fr; + grid-template-rows: repeat( 3, auto ); + } + + > * { + margin: 0; + } + + &__title { + grid-area: title; + } + + &__list { + display: grid; + padding: 0; + grid-area: cards; + grid-gap: inherit; + grid-template-columns: inherit; + list-style: none; + } + + &__view-all { + display: inline-flex; + align-items: center; + gap: 0.25rem; + grid-area: view-all; + justify-self: end; + + @media ( max-width: $breakpoint-md ) { + justify-self: start; + } + + svg { + transition: translate 0.2s ease-out; + translate: 0 0; + } + + @media ( hover: hover ) { + &:where( :hover, :focus ) { + > svg { + translate: 0.5rem 0; + } + } + } + } +} + +/** Overrides / additions for Den Haag card */ +.denhaag-card__actions { + @media ( max-width: $breakpoint-lg ) { + flex-wrap: wrap; + + .denhaag-card__subtitle { + inline-size: 100%; + } + + .denhaag-card__arrow { + margin-inline-start: auto; + } + } +} + +.denhaag-card__action-chip { + padding: 0.25rem 0.5rem; + border-radius: var( --denhaag-card-border-radius ); + background: var( --openpdd-affair-card-action-chip-background, #001d5f ); + color: var( --openpdd-affair-card-action-chip-color, #fff ); + font-size: 0.875rem; + font-weight: 700; + line-height: 1.3; + margin-inline-end: initial; + margin-inline-start: auto; + text-transform: uppercase; + + @media ( max-width: $breakpoint-lg ) { + margin-inline-end: auto; + margin-inline-start: initial; + } +} + +/** End overrides / additions for Den Haag card */ + +/** Taken from NLDS: Den Haag */ +:root { + --denhaag-card-arrow-left: ''; + --denhaag-card-arrow-position: ''; + --denhaag-card-arrow-right: ''; + --denhaag-card-border-color: black; + --denhaag-card-border-radius: 3px; + --denhaag-card-border-width: 1px; + --denhaag-card-case-active-color: var( + --openpdd-affair-card-case-active-color, + #001d5f + ); + --denhaag-card-case-archived-color: var( + --openpdd-affair-card-case-archived-color, + #001d5f + ); + --denhaag-card-case-archived-primary-background-color: var( + --openpdd-affair-card-case-archived-primary-background-color, + #e9efff + ); + --denhaag-card-case-archived-secondary-background-color: var( + --openpdd-affair-card-case-archived-secondary-background-color, + #4d6eb9 + ); + --denhaag-card-case-color: var( + --openpdd-affair-card-case-active-color, + #001d5f + ); + --denhaag-card-case-height: 100%; + --denhaag-card-case-padding-block-end: 1.25rem; + --denhaag-card-case-padding-block-start: 1.25rem; + --denhaag-card-case-paper-color: var( + --openpdd-affair-card-case-paper-color, + #fff + ); + --denhaag-card-case-primary-background-color: var( + --openpdd-affair-card-case-primary-background-color, + #e9efff + ); + --denhaag-card-case-secondary-background-color: var( + --openpdd-affair-card-case-secondary-background-color, + #4d6eb9 + ); + --denhaag-card-height: 100%; + --denhaag-card-subtitle-font-color: var( + --openpdd-affair-card-subtitle-font-color, + #001d5f + ); + --denhaag-card-subtitle-font-size: 1rem; + --denhaag-card-subtitle-font-weight: 700; + --denhaag-card-subtitle-line-height: 1.3; + --denhaag-card-subtitle-padding-block: 0; + --denhaag-card-subtitle-padding: 0; + --denhaag-card-title-font-size: 1.5rem; + --denhaag-card-title-line-height: 1.3; + --denhaag-card-title-padding-block: 0; + --denhaag-card-title-padding-inline: 0; + --denhaag-card-width: 100%; + --denhaag-card-wrapper-padding-block: 2.5rem; + --denhaag-card-wrapper-padding-inline: 1.5rem; + --denhaag-focus-border: 1px solid black; + --denhaag-title-font-color: var( + --openpdd-affair-title-font-color, + #001d5f + ); +} + +.denhaag-card { + width: var( --denhaag-card-width ); + border-radius: var( --denhaag-card-border-radius ); + block-size: var( --denhaag-card-height ); +} + +.denhaag-card--focus, +.denhaag-card:focus-within { + outline: none; +} + +.denhaag-card--hover, +.denhaag-card:hover, +.denhaag-card:hover:focus { + cursor: pointer; +} + +.denhaag-card__wrapper { + display: flex; + height: var( --denhaag-card-height ); + box-sizing: border-box; + flex-direction: column; + border-width: var( --denhaag-card-border-width ); + border-style: solid; + border-color: var( --denhaag-card-border-color ); + border-radius: var( --denhaag-card-border-radius ); + padding-block-end: var( --denhaag-card-wrapper-padding-block ); + padding-block-start: var( --denhaag-card-wrapper-padding-block ); + padding-inline-end: var( --denhaag-card-wrapper-padding-inline ); + padding-inline-start: var( --denhaag-card-wrapper-padding-inline ); +} + +.denhaag-card--focus .denhaag-card__text-wrapper, +.denhaag-card:focus-within .denhaag-card__text-wrapper { + position: relative; + outline: var( --denhaag-focus-border ); +} + +.denhaag-card__arrow { + position: var( --denhaag-card-arrow-position ); + right: var( --denhaag-card-arrow-right ); + left: var( --denhaag-card-arrow-left ); +} + +.denhaag-card__title { + display: -webkit-box; + overflow: hidden; + -webkit-box-orient: vertical; + color: var( --denhaag-title-font-color ); + font-size: var( --denhaag-card-title-font-size ); + -webkit-line-clamp: 2; + line-height: var( --denhaag-card-title-line-height ); + padding-block-end: var( --denhaag-card-title-padding-block ); + padding-block-start: var( --denhaag-card-title-padding-block ); + padding-inline-end: var( --denhaag-card-title-padding-block ); + padding-inline-start: var( --denhaag-card-title-padding-inline ); + text-decoration: none; +} + +.denhaag-card__title a:link, +.denhaag-card__title a:visited { + color: inherit; + text-decoration: none; +} + +.denhaag-card__subtitle { + color: var( --denhaag-card-subtitle-font-color ); + font-size: var( --denhaag-card-subtitle-font-size ); + font-weight: var( --denhaag-card-subtitle-font-weight ); + line-height: var( --denhaag-card-subtitle-line-height ); + padding-block-end: var( --denhaag-card-subtitle-padding-block ); + padding-block-start: var( --denhaag-card-subtitle-padding-block ); + padding-inline-end: var( --denhaag-card-subtitle-padding-block ); + padding-inline-start: var( --denhaag-card-subtitle-padding-block ); +} + +.denhaag-card--case { + position: relative; + background: var( --denhaag-card-case-secondary-background-color ); + padding-block-start: var( --denhaag-card-case-padding-block-start ); +} + +.denhaag-card--case::before { + position: absolute; + top: 8px; + right: 8px; + display: block; + width: 50%; + height: 20px; + border-radius: 0 var( --denhaag-card-border-radius ) 0 0; + background: var( --denhaag-card-case-paper-color ); + content: ''; +} + +.denhaag-card--case .denhaag-card__wrapper { + position: relative; + display: flex; + height: var( --denhaag-card-case-height ); + box-sizing: border-box; + flex-direction: column; + border: 2px; + border-radius: var( --denhaag-card-border-radius ); + background: rgba( 0, 0, 0, 0 ); + padding-block-end: var( --denhaag-card-case-padding-block-end ); + padding-block-start: var( --denhaag-card-case-padding-block-start ); + perspective: 1800px; +} + +.denhaag-card--case .denhaag-card__background { + position: absolute; + z-index: -1; + top: 0; + right: 0; + bottom: 0; + left: 0; + border-radius: var( --denhaag-card-border-radius ); + background: var( --denhaag-card-case-primary-background-color ); + border-top-left-radius: 0; + transform-origin: 50% 100%; +} + +.denhaag-card--case .denhaag-card__background::before { + position: absolute; + top: -20px; + left: 0; + display: block; + width: 60%; + height: 25px; + background: var( --denhaag-card-case-primary-background-color ); + border-top-left-radius: var( --denhaag-card-border-radius ); + content: ''; +} + +.denhaag-card--case .denhaag-card__background::after { + position: absolute; + top: -20px; + left: 55%; + display: block; + width: 10%; + height: 22px; + background: var( --denhaag-card-case-primary-background-color ); + content: ''; + transform: skewX( 30deg ); +} + +.denhaag-card--case .denhaag-card__arrow { + position: var( --denhaag-card-arrow-position ); + right: var( --denhaag-card-arrow-right ); + left: var( --denhaag-card-arrow-left ); + color: var( --denhaag-card-case-color ); +} + +.denhaag-card--case.denhaag-card--hover .denhaag-card__arrow, +.denhaag-card--case.denhaag-card--focus .denhaag-card__arrow, +.denhaag-card--case:hover .denhaag-card__arrow, +.denhaag-card--case:focus-within .denhaag-card__arrow { + color: var( --denhaag-card-case-active-color ); +} + +.denhaag-card--focus .denhaag-card__arrow, +.denhaag-card:focus-within .denhaag-card__arrow { + outline: var( --denhaag-focus-border ); +} + +.denhaag-card--case .denhaag-card__title { + position: relative; + color: var( --denhaag-card-case-color ); + font-weight: 700; + padding-block-end: var( --denhaag-card-title-padding-block ); + padding-block-start: var( --denhaag-card-title-padding-block ); + padding-inline-end: var( --denhaag-card-title-padding-inline ); + padding-inline-start: var( --denhaag-card-title-padding-inline ); +} + +.denhaag-card--case.denhaag-card--hover .denhaag-card__title, +.denhaag-card--case.denhaag-card--focus .denhaag-card__title, +.denhaag-card--case:hover .denhaag-card__title, +.denhaag-card--case:focus-within .denhaag-card__title { + color: var( --denhaag-card-case-active-color ); +} + +.denhaag-card--case .denhaag-card__subtitle { + position: relative; + color: var( --denhaag-card-case-color ); + font-weight: 500; + padding-block-end: var( --denhaag-card-subtitle-padding ); + padding-block-start: var( --denhaag-card-subtitle-padding ); + padding-inline-end: var( --denhaag-card-subtitle-padding ); + padding-inline-start: var( --denhaag-card-subtitle-padding ); +} + +.denhaag-card--case.denhaag-card--hover .denhaag-card__subtitle, +.denhaag-card--case.denhaag-card--focus .denhaag-card__subtitle, +.denhaag-card--case:hover .denhaag-card__subtitle, +.denhaag-card--case:focus-within .denhaag-card__subtitle { + color: var( --denhaag-card-case-active-color ); +} + +.denhaag-card--case.denhaag-card--hover::before, +.denhaag-card--case.denhaag-card--focus::before, +.denhaag-card--case:hover::before, +.denhaag-card--case:focus-within::before { + top: 12px; + transform: rotate( -2.45deg ); + transform-origin: right; +} + +.denhaag-card--case.denhaag-card--focus .denhaag-card__background, +.denhaag-card--case.denhaag-card--hover .denhaag-card__background, +.denhaag-card--case:hover .denhaag-card__background, +.denhaag-card--case:focus-within .denhaag-card__background { + transform: rotateX( -20deg ); +} + +.denhaag-card--case.denhaag-card--archived { + --denhaag-card-case-primary-background-color: var( + --denhaag-card-case-archived-primary-background-color + ); + --denhaag-card-case-secondary-background-color: var( + --denhaag-card-case-archived-secondary-background-color + ); + --denhaag-card-case-color: var( --denhaag-card-case-archived-color ); +} + +.MuiCardActions-root { + display: flex; + align-items: center; +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/news/_shared.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/news/_shared.scss new file mode 100644 index 00000000..f11493f2 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/news/_shared.scss @@ -0,0 +1,239 @@ +$breakpoint-sm: 576px; +$breakpoint-md: 820px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; + +.openpdd-news { + display: grid; + padding: 0; + margin: 0; + gap: 1.5rem; + grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); + list-style: none; + + @media ( max-width: $breakpoint-md ) { + grid-template-columns: 1fr; + } +} + +/** Taken from NLDS: Den Haag */ +:root { + --denhaag-color-ocher-5: hsl( 47 100% 25% ); + --denhaag-color-grey-2: hsl( 0 0% 82% ); + --denhaag-color-blue-3: hsl( 207 80% 35% ); + --denhaag-space-block-md: 1rem; + --denhaag-typography-weight-regular: 400; + --denhaag-space-block-xs: 0.5rem; + --denhaag-space-block-xl: 1.5rem; + --denhaag-link-focus-outline: var( --denhaag-focus-border ); + --denhaag-focus-border: var( --denhaag-focus-border-width ) + var( --denhaag-focus-border-style ) var( --denhaag-focus-border-color ); + --denhaag-focus-border-width: 2px; + --denhaag-focus-border-style: dashed; + --denhaag-focus-border-color: var( --denhaag-color-ocher-5 ); + + --denhaag-card-news-border: 1px solid var( --denhaag-color-grey-2 ); + --denhaag-card-news-gap: var( --denhaag-space-block-md ); + --denhaag-card-news-height: 100%; + --denhaag-card-news-margin: 0; + --denhaag-card-news-padding: var( --denhaag-space-block-md ); + --denhaag-card-news-text-decoration: none; + --denhaag-card-news-transition-timing-function: ease-in-out; + --denhaag-card-news-transition-duration: 200ms; + --denhaag-card-news-width: 100%; + --denhaag-box-shadow-default: -1px -4px 15px 0px rgba( 0, 0, 0, 0.1 ); + --denhaag-card-news-translate: translateY( -0.125rem ); + --denhaag-card-news-focus-transition: none; + --denhaag-card-news-image-container-height: auto; + --denhaag-card-news-image-container-width: 100%; + --denhaag-card-news-image-aspect-ratio: 16 / 9; + --denhaag-card-news-icon-translate: ''; + --denhaag-card-news-content-display: flex; + --denhaag-card-news-content-flex-direction: column; + --denhaag-card-news-figcaption-padding: ''; + --denhaag-card-news-date-color: var( + --openpdd-news-card-news-date-color, + #328725 + ); + --denhaag-card-news-date-font: normal + var( --denhaag-typography-weight-regular ); + --denhaag-card-news-text-margin-block-end: var( --denhaag-space-block-xs ); + --denhaag-card-news-heading-margin-block-start: var( + --denhaag-space-block-xs + ); + --denhaag-card-news-paragraph-display: ''; + --denhaag-card-news-icon-align-self: end; + --denhaag-card-news-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-card-news-icon-float: right; + --denhaag-card-news-icon-size: var( --denhaag-space-block-xl ); + --denhaag-card-news-icon-opacity: 1; + --denhaag-card-news-border-radius: 3px; + --denhaag-border-radius: 3px; + --denhaag-card-news-outline: var( --denhaag-link-focus-outline ); +} + +.denhaag-card-news { + --denhaag-card-news-paragraph-display: none; + position: relative; + display: flex; + width: var( --denhaag-card-news-width ); + height: var( --denhaag-card-news-height ); + flex-direction: column-reverse; + justify-content: flex-end; + border: var( --denhaag-card-news-border ); + gap: var( --denhaag-card-news-gap ); + margin-block: var( --denhaag-card-news-margin ); + margin-inline: var( --denhaag-card-news-margin ); + padding-block: var( --denhaag-card-news-padding ); + padding-inline: var( --denhaag-card-news-padding ); + text-decoration: var( --denhaag-card-news-text-decoration ); + transition: + box-shadow var( --denhaag-card-news-transition-timing-function ) + var( --denhaag-card-news-transition-duration ), + transform var( --denhaag-card-news-transition-timing-function ) + var( --denhaag-card-news-transition-duration ); +} + +@media ( prefers-reduced-motion: reduce ) { + .denhaag-card-news { + --denhaag-card-news-transition-duration: 0ms; + } +} + +.denhaag-card-news--reduced-motion { + --denhaag-card-news-transition-duration: 0ms; +} + +.denhaag-card-news--hover, +.denhaag-card-news:hover { + --denhaag-card-news-icon-opacity: 100%; + --denhaag-card-news-translate: translateY( -0.125rem ); + box-shadow: var( --denhaag-box-shadow-default ); + transform: var( --denhaag-card-news-translate ); +} + +.denhaag-card-news:focus-visible, +.denhaag-card-news--focus, +.denhaag-card-news:focus-within:not( :focus-visible ) { + --denhaag-card-news-icon-opacity: 100%; + --denhaag-card-news-translate: 0; + box-shadow: var( --denhaag-box-shadow-default ); + transition: var( --denhaag-card-news-focus-transition ); +} + +.denhaag-card-news__image-container { + overflow: hidden; + width: var( --denhaag-card-news-image-container-width ); + height: var( --denhaag-card-news-image-container-height ); +} + +.denhaag-card-news__image { + width: inherit; + height: inherit; + aspect-ratio: var( --denhaag-card-news-image-aspect-ratio ); + object-fit: cover; + transition: transform var( --denhaag-card-news-transition-timing-function ) + var( --denhaag-card-news-transition-duration ); +} + +.denhaag-card-news--hover .denhaag-card-news__image, +.denhaag-card-news:hover .denhaag-card-news__image { + transform: var( --denhaag-card-news-translate ) scale( 1.02 ); +} + +.denhaag-card-news .denhaag-icon { + --denhaag-card-news-icon-translate: translateX( -0.1875rem ); + transform: var( --denhaag-card-news-icon-translate ); + transition: transform var( --denhaag-card-news-transition-timing-function ) + var( --denhaag-card-news-transition-duration ); +} + +.denhaag-card-news--hover .denhaag-icon, +.denhaag-card-news:hover .denhaag-icon { + --denhaag-card-news-icon-translate: translateX( 0 ); +} + +.denhaag-card-news__content { + display: var( --denhaag-card-news-content-display ); + flex-direction: var( --denhaag-card-news-content-flex-direction ); +} + +@media ( min-width: 25.9375rem ) { + .denhaag-card-news__content { + padding-block-end: var( --denhaag-card-news-figcaption-padding ); + padding-block-start: var( --denhaag-card-news-figcaption-padding ); + padding-inline-end: var( --denhaag-card-news-figcaption-padding ); + padding-inline-start: var( --denhaag-card-news-figcaption-padding ); + } +} + +.denhaag-card-news__date { + order: 1; + color: var( --denhaag-card-news-date-color ); + font: var( --denhaag-card-news-date-font ); +} + +.denhaag-card-news__heading { + order: 2; + margin-block-end: var( --denhaag-card-news-text-margin-block-end ); + margin-block-start: var( + --denhaag-card-news-heading-margin-block-start + ) !important; +} + +.denhaag-card-news__paragraph { + order: 3; + margin-block-end: var( --denhaag-card-news-text-margin-block-end ); +} + +@media ( min-width: 25.9375rem ) { + .denhaag-card-news__paragraph { + --denhaag-card-news-paragraph-display: block; + } +} + +.denhaag-card-news .utrecht-paragraph { + display: var( --denhaag-card-news-paragraph-display, none ); +} + +.denhaag-card-news__icon { + position: relative; + width: var( --denhaag-card-news-icon-size ); + height: var( --denhaag-card-news-icon-size ); + align-self: var( --denhaag-card-news-icon-align-self ); + order: 4; + clear: both; + color: var( --denhaag-card-news-icon-color ); + float: var( --denhaag-card-news-icon-float ); + opacity: var( --denhaag-card-news-icon-opacity, 0% ); + transition: opacity var( --denhaag-card-news-transition-timing-function ) + var( --denhaag-card-news-transition-duration ); +} + +.denhaag-card-news--hover .denhaag-card-news__icon, +.denhaag-card-news:hover .denhaag-card-news__icon { + opacity: var( --denhaag-card-news-icon-opacity, 0% ); +} + +.denhaag-card-news__link { + color: inherit; + text-decoration: inherit; +} + +.denhaag-card-news__link:focus-visible { + outline: none; +} + +.denhaag-card-news__link::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + content: ''; +} + +.denhaag-card-news--focus .denhaag-card-news__link::after, +.denhaag-card-news:focus-within .denhaag-card-news__link:focus-visible::after { + outline: var( --denhaag-card-news-outline ); +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/personal-heading/_shared.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/personal-heading/_shared.scss new file mode 100644 index 00000000..9d55cd1c --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/personal-heading/_shared.scss @@ -0,0 +1,70 @@ +$breakpoint-sm: 576px; +$breakpoint-md: 820px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; + +.openpdd-personal-heading { + --gradient-color: rgba( 218, 189, 160, 1 ); + display: grid; + background-image: linear-gradient( + 195deg, + var( --gradient-color ) 0%, + rgba( 255, 255, 255, 0 ) 55% + ); + gap: 1.5rem; + grid-template-columns: 1fr 22rem; + + @media ( max-width: $breakpoint-lg ) { + background-image: linear-gradient( + 210deg, + var( --gradient-color ) 0%, + rgba( 255, 255, 255, 0 ) 80% + ); + grid-template-columns: 1fr; + } + + &__content { + display: flex; + flex-direction: column; + order: -1; + gap: inherit; + padding-block-start: 4rem; + + > * { + margin: 0; + } + + @media ( max-width: $breakpoint-lg ) { + order: 1; + padding-block-start: 0; + } + } + + &__image-wrapper { + mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='361' height='181' viewBox='0 0 361 181' fill='none'%3E%3Cpath fill='black' d='M0 0H361V181L64.1612 128.671C49.5995 126.104 37.6417 115.713 33.0676 101.652L0 0Z'/%3E%3C/svg%3E" ); + mask-repeat: no-repeat; + mask-size: cover; + + @media ( max-width: $breakpoint-lg ) { + mask-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='360' height='182' viewBox='0 0 360 182' fill='none'%3E%3Cpath d='M0 0H360V182L33.7982 130.804C14.3394 127.75 0 110.985 0 91.2881V0Z' fill='black'/%3E%3C/svg%3E" ); + } + } + + &__image { + block-size: 100%; + inline-size: 100%; + object-fit: cover; + } +} + +.page-main__content { + grid-area: content; + + > .openpdd-personal-heading:first-child { + @include media-breakpoint-up( md ) { + margin-top: calc( + var( --openpdd-mijn-zaken-container-spacing ) * -1 + ); + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/tasks/_shared.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/tasks/_shared.scss new file mode 100644 index 00000000..4d7932ef --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/blocks/tasks/_shared.scss @@ -0,0 +1,85 @@ +$breakpoint-sm: 576px; +$breakpoint-md: 820px; +$breakpoint-lg: 992px; +$breakpoint-xl: 1200px; + +.openpdd-tasks { + display: flex; + flex-direction: column; + gap: 1.5rem; + --icon-arrow-right-color: #4d6eb9; + + > * { + margin: 0; + } + + &__list { + padding: 0; + list-style: none; + } + + &__arrow-right { + transition: translate 0.2s ease-out; + translate: 0 0; + + @media ( max-width: $breakpoint-lg ) { + margin-inline-start: auto; + } + } + + &__link { + display: flex; + align-items: center; + padding: var( --openpdd-task-padding, 1rem ); + border-block-end: 1px solid var( --openpdd-task-border-color, #d2d2d2 ); + color: var( --openpdd-task-color, #333 ); + gap: 1.5rem; + text-decoration: none; + + @media ( max-width: $breakpoint-lg ) { + flex-wrap: wrap; + gap: 0.5rem; + } + + @media ( hover: hover ) { + &:where( :hover, :focus ) { + color: var( --openpdd-task-color, #333 ); + text-decoration: none; + + .openpdd-tasks__task-title { + text-decoration: underline; + } + + .openpdd-tasks__arrow-right { + translate: 0.5rem 0; + } + } + } + } + + [class*='__task-status'] { + display: inline-flex; + align-items: center; + gap: 0.5rem; + } + + &__task-status--error { + color: var( --openpdd-error-color, #8c3600 ); + font-weight: 700; + } + + &__task-title { + font-size: 1.125rem; + margin-inline-end: auto; + + @media ( max-width: $breakpoint-lg ) { + width: 100%; + } + } + + &__header { + display: inline-flex; + align-items: center; + gap: 0.5rem; + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_dropdown.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_dropdown.scss new file mode 100644 index 00000000..d9c20868 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_dropdown.scss @@ -0,0 +1,25 @@ +$component: 'dropdown'; + +.#{$component} { + &-menu { + top: calc( 100% + 0.5rem ); + } + + &-item { + &:hover { + text-decoration: $dropdown-link-hover-decoration; + } + + &.active { + font-weight: $dropdown-link-active-font-weight; + } + } + + &-button-close { + padding: 0; + border: none; + background: none; + cursor: pointer; + outline: inherit; + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_footer.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_footer.scss new file mode 100644 index 00000000..344233dc --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_footer.scss @@ -0,0 +1,31 @@ +$footer: 'footer'; + +.#{$footer} { + background-color: $mijn-zaken-footer-bg-color; + color: $mijn-zaken-footer-color; + + a:not( .wp-block-button__link ) { + color: inherit; + } + + &-bottom-menu { + display: flex; + height: 100%; + flex-wrap: wrap; + margin: 0; + gap: 1rem; + + @include media-breakpoint-up( lg ) { + flex-direction: row; + } + + .menu-item { + flex-basis: calc( 50% - 1rem ); + margin: 0; + + @include media-breakpoint-up( sm ) { + flex-basis: auto; + } + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_navbar.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_navbar.scss index 7c7cbca0..1bb84742 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_navbar.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/components/_navbar.scss @@ -12,4 +12,33 @@ @include media-breakpoint-up( xl ) { min-height: $navbar-height-desktop; } + + .sub-menu { + position: absolute; + top: 100%; + min-width: max-content; + padding-left: 0; + border-radius: $border-radius; + background-color: $white; + box-shadow: $box-shadow; + list-style-type: none; + opacity: 0; + transition: 0.3s ease all; + visibility: hidden; + + .menu-item a { + padding: 0.75rem 1rem; + } + } + + .show-sub-menu .sub-menu { + opacity: 1; + visibility: visible; + } +} + +.menu-item { + a { + text-decoration: none; + } } diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/editor.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/editor.scss index 0ded9fc7..fda49e48 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/editor.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/editor.scss @@ -5,7 +5,12 @@ @import 'settings/bootstrap'; @import 'settings/variables'; @import 'settings/root'; + +/*-------------------------------------------------------------- + Tools +--------------------------------------------------------------*/ @import 'tools/mixins'; +@import 'tools/helpers'; /*-------------------------------------------------------------- Components diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_headings.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_headings.scss new file mode 100644 index 00000000..69afbd68 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_headings.scss @@ -0,0 +1,3 @@ +h1 { + margin-bottom: 1.5rem; +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_links.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_links.scss index 5c3b81de..b3ec9e9f 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_links.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_links.scss @@ -1,5 +1,7 @@ .page-content { - a:not( .wp-block-button__link ):not( .owc-gf-digid-toolbar-logout ) { + a:not( .wp-block-button__link ):not( .owc-gf-digid-toolbar-logout ):not( + [class*='openpdd-'] + ) { padding-bottom: 1px; border-bottom: 2px solid rgba( $link-color, 0.3 ); transition: all 0.05s ease-out; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_lists.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_lists.scss new file mode 100644 index 00000000..8dd9a364 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/elements/_lists.scss @@ -0,0 +1,14 @@ +ul, +ol { + &.is-style-arrows { + @include list-unstyled; + + li { + &::before { + margin-right: 0.5rem; + content: '→'; + transform: scale( 1.1 ); + } + } + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-fpe.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-fpe.scss index 970bc2aa..5bac8980 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-fpe.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-fpe.scss @@ -1,37 +1,7 @@ $layout: 'page-template-template-fpe'; -// This template enables full page editing with all the functionality .#{$layout} .page-main { > * { - max-width: calc( 100% - #{$grid-gutter-width} ); - margin-right: auto; - margin-left: auto; - - @include media-breakpoint-up( sm ) { - max-width: map-get( $container-max-widths, 'sm' ); - } - - @include media-breakpoint-up( md ) { - max-width: map-get( $container-max-widths, 'md' ); - } - - @include media-breakpoint-up( xl ) { - max-width: var( --layout-content-size ); - } - - // Equals the Bootstrap containers - &.alignwide { - @include media-breakpoint-up( lg ) { - max-width: calc( #{map-get( $container-max-widths, 'lg' )} ); - } - - @include media-breakpoint-up( xl ) { - max-width: calc( #{map-get( $container-max-widths, 'xl' )} ); - } - } - - &.alignfull { - max-width: 100%; - } + @include add-gutenberg-alignment-layouts; } } diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-mijn-zaken.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-mijn-zaken.scss new file mode 100644 index 00000000..c781e99b --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/layouts/_template-mijn-zaken.scss @@ -0,0 +1,44 @@ +.page-template-template-mijn-zaken { + display: flex; + min-height: 100vh; + flex-direction: column; + background-color: var( --color-palette-white ); + + .footer { + margin-top: auto; + } +} + +.page-main--mijn-zaken { + --openpdd-mijn-zaken-container-spacing: 3rem; + display: grid; + flex: 1 0 auto; + gap: var( --openpdd-mijn-zaken-gap, 2rem ); + grid-template-areas: var( + --openpdd-mijn-zaken-template, + 'aside' 'content' + ); + padding-block-end: var( --openpdd-mijn-zaken-container-spacing ); + padding-block-start: var( --openpdd-mijn-zaken-container-spacing ); + + @include media-breakpoint-up( md ) { + --openpdd-mijn-zaken-template: 'aside content content'; + --openpdd-mijn-zaken-gap: 2.5rem; + grid-template-columns: 1fr 3fr; + } + + .page-main__aside { + height: fit-content; + grid-area: aside; + + @include media-breakpoint-up( md ) { + position: sticky; + top: var( --openpdd-mijn-zaken-gap ); + bottom: var( --openpdd-mijn-zaken-gap ); + } + } + + .page-main__content { + grid-area: content; + } +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_badge-counter.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_badge-counter.scss new file mode 100644 index 00000000..bbdf7ab6 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_badge-counter.scss @@ -0,0 +1,92 @@ +// Version 0.1.1-alpha.346 + +/** + * @license EUPL-1.2 + * Copyright (c) 2020-2022 Gemeente Utrecht + * Copyright (c) 2020-2022 Frameless B.V. + */ + +/** + * @license EUPL-1.2 + * Copyright (c) 2020-2022 Gemeente Utrecht + * Copyright (c) 2020-2022 Frameless B.V. + */ + +/** + * @license EUPL-1.2 + * Copyright (c) 2020-2022 Gemeente Utrecht + * Copyright (c) 2020-2022 Frameless B.V. + */ +.utrecht-badge-counter, +.denhaag-badge-counter__counter { + display: inline-block; + border-radius: var( + --utrecht-badge-counter-border-radius, + var( --utrecht-badge-border-radius, 0.5ch ) + ); + + /* Limit size to `max-content`, so the badge will not be stretched out of proportion inside a flexbox */ + background-color: var( + --utrecht-badge-counter-background-color, + var( --utrecht-badge-background-color, hsl( 0, 0%, 0% ) ) + ); + color: var( + --utrecht-badge-counter-color, + var( --utrecht-badge-color, hsl( 0, 0%, 100% ) ) + ); + + // font-family: var( --utrecht-document-font-family, sans-serif ); + // font-size: var( --utrecht-badge-counter-font-size ); + // font-style: var( + // --utrecht-badge-counter-font-style, + // normal + // ); /* no inheritance */ + // font-weight: var( + // --utrecht-badge-counter-font-weight, + // var( --utrecht-badge-font-weight, bold ) + // ); /* no inheritance */ + line-height: 1; + max-block-size: max-content; + max-inline-size: max-content; + min-block-size: var( --utrecht-badge-counter-min-size, 1em ); + min-inline-size: var( --utrecht-badge-counter-min-size, 1em ); + padding-block-end: var( + --utrecht-badge-counter-padding-block, + var( --utrecht-badge-padding-block, 0.5ex ) + ); + padding-block-start: var( + --utrecht-badge-counter-padding-block, + var( --utrecht-badge-padding-block, 0.5ex ) + ); + padding-inline-end: var( + --utrecht-badge-counter-padding-inline, + var( --utrecht-badge-padding-inline, 0.5ch ) + ); + padding-inline-start: var( + --utrecht-badge-counter-padding-inline, + var( --utrecht-badge-padding-inline, 0.5ch ) + ); + text-align: center; + text-decoration: none; /* no inheritance */ + white-space: nowrap; +} + +@media screen and ( -ms-high-contrast: active ), + screen and ( forced-colors: active ) { + .utrecht-badge-counter, + .denhaag-badge-counter__counter { + /* Warning: there layout difference because of the added 1px border */ + border-width: 1px; + border-style: solid; + border-color: currentColor; + } +} + +.denhaag-badge-counter { + --denhaag-dot-indicator-size: 8px; +} + +.denhaag-badge-counter__counter { + font-family: var( --utrecht-badge-counter-font-family ); + font-size: var( --utrecht-badge-counter-font-size ); +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_dot-indicator.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_dot-indicator.scss new file mode 100644 index 00000000..d4b70ad3 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_dot-indicator.scss @@ -0,0 +1,29 @@ +// Version 0.1.1-alpha.34 +.denhaag-dot-indicator { + position: relative; + display: inline-flex; + flex-shrink: 0; + vertical-align: middle; +} + +.denhaag-dot-indicator__dot { + position: absolute; + width: var( --denhaag-dot-indicator-size, 8px ); + height: var( --denhaag-dot-indicator-size, 8px ); + border: var( --denhaag-dot-indicator-border, 2px ); + border-radius: 50%; + background-color: var( --denhaag-dot-indicator-background-color, #ff0000 ); + transform: scale( 1 ) translate( 50%, -50% ); +} + +.denhaag-dot-indicator--overlap-rectangle .denhaag-dot-indicator__dot { + top: 0; + right: 0; + transform: scale( 1 ) translate( 50%, -50% ); +} + +.denhaag-dot-indicator--overlap-circle .denhaag-dot-indicator__dot { + top: 14%; + right: 14%; + transform: scale( 1 ) translate( 50%, -50% ); +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_icon.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_icon.scss new file mode 100644 index 00000000..c214e958 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_icon.scss @@ -0,0 +1,10 @@ +// Version 0.2.3-alpha.346 +.denhaag-icon { + display: inline-block; + width: 1em; + height: 1em; + flex-shrink: 0; + fill: currentcolor; + font-size: 1.5rem; + transition: fill 200ms cubic-bezier( 0.4, 0, 0.2, 1 ) 0ms; +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_sidenav.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_sidenav.scss new file mode 100644 index 00000000..83bf9c77 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_sidenav.scss @@ -0,0 +1,73 @@ +// Version 0.1.0-alpha.164 +.denhaag-sidenav { + display: var( --denhaag-sidenav-display ); + min-width: var( --denhaag-sidenav-min-width ); + flex-direction: var( --denhaag-sidenav-flex-direction ); + row-gap: var( --denhaag-sidenav-row-gap ); +} + +@media ( width <= 767px ) { + .denhaag-sidenav { + display: var( --denhaag-sidenav-mobile-display ); + } +} + +.denhaag-sidenav__list { + list-style: none; + margin-block-end: 0; + margin-block-start: 0; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-start: 0; +} + +.denhaag-sidenav__list--child { + margin-inline-start: var( + --denhaag-sidenav-list-child-margin-inline-start + ); +} + +.denhaag-sidenav__item { + display: flex; + flex-direction: row; + align-items: center; + + // font-family: var( --denhaag-sidenav-item-font-family, sans-serif ); + // font-size: var( --denhaag-sidenav-item-font-size ); + // font-weight: var( --denhaag-sidenav-item-font-weight, normal ); + line-height: 1.5; +} + +.denhaag-sidenav__link { + display: flex; + flex-direction: row; + flex-grow: 1; + align-items: center; + color: var( --denhaag-sidenav-link-color ); + column-gap: 16px; + padding-block-end: var( --denhaag-sidenav-link-padding-block-end ); + padding-block-start: var( --denhaag-sidenav-link-padding-block-start ); + text-decoration: none; +} + +.denhaag-sidenav__link:hover, +.denhaag-sidenav__link--hover { + color: var( --denhaag-sidenav-link-hover-color ); + cursor: pointer; +} + +.denhaag-sidenav__link:focus-visible, +.denhaag-sidenav__link--focus { + outline: var( --denhaag-focus-border ); +} + +.denhaag-sidenav__link--current { + color: var( --denhaag-sidenav-link-active-color ); + font-weight: var( --denhaag-sidenav-link-active-font-weight ); +} + +.denhaag-sidenav__link--child { + padding-inline-start: var( + --denhaag-sidenav-link-child-padding-inline-start + ); +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_tokens.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_tokens.scss new file mode 100644 index 00000000..b22eacf3 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/nlds/denhaag/_tokens.scss @@ -0,0 +1,2637 @@ +/** + * Do not edit directly + * Generated on Thu, 05 Oct 2023 08:22:18 GMT + */ + +:root { + --utrecht-space-column-5xl: 80px; + --utrecht-space-column-4xl: 64px; + --utrecht-space-column-3xl: 48px; + --utrecht-space-column-2xl: 32px; + --utrecht-space-column-xl: 28px; + --utrecht-space-column-lg: 24px; + --utrecht-space-column-md: 16px; + --utrecht-space-column-sm: 12px; + --utrecht-space-column-xs: 8px; + --utrecht-space-column-2xs: 4px; + --utrecht-space-column-3xs: 2px; + --utrecht-space-column-4xs: 1px; + --utrecht-space-row-5xl: 80px; + --utrecht-space-row-4xl: 64px; + --utrecht-space-row-3xl: 48px; + --utrecht-space-row-2xl: 32px; + --utrecht-space-row-xl: 28px; + --utrecht-space-row-lg: 24px; + --utrecht-space-row-md: 16px; + --utrecht-space-row-sm: 12px; + --utrecht-space-row-xs: 8px; + --utrecht-space-row-2xs: 4px; + --utrecht-space-row-3xs: 2px; + --utrecht-space-row-4xs: 1px; + --utrecht-space-text-3xl: 48px; + --utrecht-space-text-2xl: 32px; + --utrecht-space-text-xl: 28px; + --utrecht-space-text-lg: 24px; + --utrecht-space-text-md: 16px; + --utrecht-space-text-sm: 12px; + --utrecht-space-text-xs: 8px; + --utrecht-space-text-2xs: 4px; + --utrecht-space-text-3xs: 2px; + --utrecht-space-inline-3xl: 48px; + --utrecht-space-inline-2xl: 32px; + --utrecht-space-inline-xl: 28px; + --utrecht-space-inline-lg: 24px; + --utrecht-space-inline-md: 16px; + --utrecht-space-inline-sm: 12px; + --utrecht-space-inline-xs: 8px; + --utrecht-space-inline-2xs: 4px; + --utrecht-space-inline-3xs: 2px; + --utrecht-space-block-5xl: 80px; + --utrecht-space-block-4xl: 64px; + --utrecht-space-block-3xl: 48px; + --utrecht-space-block-2xl: 32px; + --utrecht-space-block-xl: 28px; + --utrecht-space-block-lg: 24px; + --utrecht-space-block-md: 16px; + --utrecht-space-block-sm: 12px; + --utrecht-space-block-xs: 8px; + --utrecht-space-block-2xs: 4px; + --utrecht-space-block-3xs: 2px; + --utrecht-action-submit-cursor: pointer; + --utrecht-action-disabled-cursor: not-allowed; + --utrecht-action-busy-cursor: wait; + --utrecht-unordered-list-item-padding-inline-start: 6px; + --utrecht-unordered-list-item-margin-block-end: 5px; + --utrecht-unordered-list-item-margin-block-start: 5px; + --utrecht-unordered-list-padding-inline-start: 20px; + --utrecht-unordered-list-margin-block-end: 14px; + --utrecht-unordered-list-margin-block-start: 0; + --utrecht-table-row-alternate-even-background-color: rgb( 255, 255, 255 ); + --utrecht-table-row-alternate-odd-background-color: rgb( 250, 250, 250 ); + --utrecht-table-row-border-block-end-width: 1px; + --utrecht-table-heading-font-weight: 700; + --utrecht-table-heading-font-size: 18px; + --utrecht-table-header-border-block-end-width: 1px; + --utrecht-table-caption-text-align: start; + --utrecht-table-caption-font-weight: 700; + --utrecht-table-border-width: 1px; + --utrecht-separator-margin-block-end: 16px; + --utrecht-separator-margin-block-start: 16px; + --utrecht-separator-width: 1px; + --utrecht-paragraph-paragraph-margin-block-start: 0.89em; + --utrecht-paragraph-distanced-margin-block-end: 0; + --utrecht-paragraph-distanced-margin-block-start: 0; + --utrecht-paragraph-lead-line-height: 26px; + --utrecht-paragraph-margin-block-end: 0; + --utrecht-paragraph-margin-block-start: 0; + --utrecht-page-footer-padding-inline-start: 30px; + --utrecht-page-footer-padding-inline-end: 30px; + --utrecht-page-footer-padding-block-start: 30px; + --utrecht-page-footer-padding-block-end: 40px; + --utrecht-page-footer-background-color: hsl( 48deg 94% 48% ); + --utrecht-ordered-list-item-margin-block-end: 0; + --utrecht-ordered-list-item-margin-block-start: 0; + --utrecht-logo-max-height: 97px; + --utrecht-list-social-item-margin-inline-end: 14px; + --utrecht-link-hover-text-decoration-thickness: 1px; + --utrecht-link-focus-text-decoration-thickness: 1px; + --utrecht-link-text-underline-offset: 3px; + --utrecht-link-text-decoration-thickness: 1px; + --utrecht-link-social-border-color: transparent; + --utrecht-link-social-border-width: 5px; + --utrecht-link-social-background-color: transparent; + --utrecht-icon-baseline-inset-block-start: 0.125em; + --utrecht-icon-size: 1.125rem; + --utrecht-heading-5-distanced-margin-block-end: 0; + --utrecht-heading-5-distanced-margin-block-start: 0; + --utrecht-heading-5-margin-block-start: 1rem; + --utrecht-heading-5-margin-block-end: 0.28125rem; + --utrecht-heading-4-distanced-margin-block-end: 0; + --utrecht-heading-4-distanced-margin-block-start: 0; + --utrecht-heading-4-margin-block-start: 1.1125rem; + --utrecht-heading-4-margin-block-end: 0.3125rem; + --utrecht-heading-3-distanced-margin-block-end: 0; + --utrecht-heading-3-distanced-margin-block-start: 0; + --utrecht-heading-3-margin-block-start: 1.33125rem; + --utrecht-heading-3-margin-block-end: 0.375rem; + --utrecht-heading-2-distanced-margin-block-end: 0; + --utrecht-heading-2-distanced-margin-block-start: 0; + --utrecht-heading-2-margin-block-start: 1.775rem; + --utrecht-heading-2-margin-block-end: 0.5rem; + --utrecht-form-toggle-thumb-min-inline-size: 1em; + --utrecht-form-toggle-thumb-margin-inline-end: 0.2rem; + --utrecht-form-toggle-thumb-margin-inline-start: 0.2rem; + --utrecht-form-toggle-width: 3rem; + --utrecht-form-toggle-height: 1.5rem; + --utrecht-form-toggle-border-width: 0; + --utrecht-form-toggle-border-radius: 12px; + --utrecht-form-label-radio-font-weight: 400; + --utrecht-form-label-checkbox-font-weight: 400; + --utrecht-form-control-invalid-border-width: 1px; + --utrecht-form-control-padding-inline-start: 12px; + --utrecht-form-control-padding-inline-end: 12px; + --utrecht-form-control-padding-block-start: 11px; + --utrecht-form-control-padding-block-end: 11px; + --utrecht-form-control-border-width: 1px; + --utrecht-document-line-height: normal; + --utrecht-data-list-rows-border-bottom-width: 1px; + --utrecht-data-list-rows-column-min-inline-size: 25ch; + --utrecht-data-list-rows-column-inline-size: 80%; + --utrecht-data-list-rows-item-value-margin-block-start: 0; + --utrecht-data-list-item-value-line-height: 1.5; + --utrecht-data-list-item-key-line-height: 1.5; + --utrecht-data-list-item-key-font-weight: bold; + --utrecht-custom-checkbox-focus-border-width: 1px; + --utrecht-custom-checkbox-invalid-border-width: 1px; + --utrecht-custom-checkbox-checked-border-width: 1px; + --utrecht-custom-checkbox-disabled-border-width: 1px; + --utrecht-custom-checkbox-size: 20px; + --utrecht-custom-checkbox-border-width: 1px; + --utrecht-custom-checkbox-border-radius: 3px; + --utrecht-button-margin-block-end: 0; + --utrecht-button-margin-block-start: 0; + --utrecht-button-margin-inline-end: 0; + --utrecht-button-margin-inline-start: 0; + --utrecht-button-border-width: 0; + --utrecht-breadcrumb-item-padding-inline-start: 14px; + --utrecht-breadcrumb-item-padding-inline-end: 14px; + --utrecht-breadcrumb-divider-inline-size: 24px; + --utrecht-breadcrumb-divider-content: ›; + --utrecht-badge-padding-inline: 8px; + --utrecht-badge-padding-block: 6px; + --utrecht-badge-font-weight: 700; + --utrecht-badge-status-text-transform: uppercase; + --utrecht-badge-counter-padding-inline: 6px; + --utrecht-badge-counter-padding-block: 5px; + --utrecht-badge-counter-font-weight: 700; + --of-button-anchor-bg: transparent; + --of-button-anchor-color-border: transparent; + --denhaag-typography-mobile-scale-3xl-font-size: 2.25rem; + --denhaag-typography-mobile-scale-2xl-font-size: 1.75rem; + --denhaag-typography-mobile-scale-xl-font-size: 1.4375rem; + --denhaag-typography-scale-3xl-line-height: 1.3; + --denhaag-typography-scale-3xl-font-size: 3rem; + --denhaag-typography-scale-2xl-line-height: 1.3; + --denhaag-typography-scale-2xl-font-size: 2rem; + --denhaag-typography-scale-xl-line-height: 1.3; + --denhaag-typography-scale-xl-font-size: 1.5rem; + --denhaag-typography-scale-lg-line-height: 1.3; + --denhaag-typography-scale-lg-font-size: 1.25rem; + --denhaag-typography-scale-base-line-height: 1.5; + --denhaag-typography-scale-base-font-size: 1.125rem; + --denhaag-typography-scale-s-line-height: 1.3; + --denhaag-typography-scale-s-font-size: 0.875rem; + --denhaag-typography-scale-xs-font-size: 0.625rem; + --denhaag-typography-sans-serif-alternate-font-family: 'TheMix', sans-serif; + --denhaag-typography-sans-serif-font-family: 'TheSans', sans-serif; + --denhaag-typography-weight-bold: 700; + --denhaag-typography-weight-semibold: 600; + --denhaag-typography-weight-medium: 500; + --denhaag-typography-weight-regular: 400; + --denhaag-color-white: hsl( 0 0% 100% ); + --denhaag-color-black: hsl( 0 0% 0% ); + --denhaag-color-warmgrey-1: hsl( 40 18% 97% ); + --denhaag-color-grey-5: hsla( 0, 0%, 18%, 1 ); + --denhaag-color-grey-4: hsl( 0 0% 29% ); + --denhaag-color-grey-3: hsl( 0 0% 48% ); + --denhaag-color-grey-2: hsl( 0 0% 82% ); + --denhaag-color-grey-1: hsl( 0 0% 95% ); + --denhaag-color-orange-5: hsl( 23 100% 27% ); + --denhaag-color-orange-4: hsl( 23 99% 44% ); + --denhaag-color-orange-3: hsl( 34 100% 47% ); + --denhaag-color-orange-2: hsl( 34 100% 68% ); + --denhaag-color-orange-1: hsl( 34 100% 84% ); + --denhaag-color-red-5: hsl( 1 100% 16% ); + --denhaag-color-red-4: hsl( 2 100% 32% ); + --denhaag-color-red-3: hsl( 6 93% 42% ); + --denhaag-color-red-2: hsl( 5 75% 72% ); + --denhaag-color-red-1: hsl( 4 100% 92% ); + --denhaag-color-ocher-5: hsl( 47 100% 25% ); + --denhaag-color-ocher-4: hsl( 47 100% 40% ); + --denhaag-color-ocher-3: hsl( 50 94% 57% ); + --denhaag-color-ocher-2: hsl( 50 100% 76% ); + --denhaag-color-ocher-1: hsl( 50 100% 91% ); + --denhaag-color-blue-5: hsl( 207 93% 16% ); + --denhaag-color-blue-4: hsl( 207 87% 27% ); + --denhaag-color-blue-3: hsl( 207 80% 35% ); + --denhaag-color-blue-2: hsl( 210 64% 80% ); + --denhaag-color-blue-1: hsl( 208 76% 92% ); + --denhaag-color-green-5: hsl( 139 100% 9% ); + --denhaag-color-green-4: hsl( 138 57% 27% ); + --denhaag-color-green-3: hsl( 138 58% 33% ); + --denhaag-color-green-2: hsl( 118 28% 60% ); + --denhaag-color-green-1: hsl( 117 28% 87% ); + --denhaag-space-inline-5xl: 4rem; /* Extra Large 5 */ + --denhaag-space-inline-4xl: 3rem; /* Extra Large 4 */ + --denhaag-space-inline-3xl: 2.5rem; /* Extra Large 3 */ + --denhaag-space-inline-2xl: 2rem; /* Extra Large 2 */ + --denhaag-space-inline-xl: 1.5rem; /* Extra Large */ + --denhaag-space-inline-lg: 1.25rem; /* Large */ + --denhaag-space-inline-md: 1rem; /* Medium */ + --denhaag-space-inline-sm: 0.8rem; /* Small */ + --denhaag-space-inline-xs: 0.5rem; /* Extra Small */ + --denhaag-space-inline-2xs: 0.25rem; /* Extra Small 2 */ + --denhaag-space-inline-3xs: 0.125rem; /* Extra Small 3 */ + --denhaag-space-block-5xl: 4rem; /* Extra Large 5 */ + --denhaag-space-block-4xl: 3rem; /* Extra Large 4 */ + --denhaag-space-block-3xl: 2.5rem; /* Extra Large 3 */ + --denhaag-space-block-2xl: 2rem; /* Extra Large 2 */ + --denhaag-space-block-xl: 1.5rem; /* Extra Large */ + --denhaag-space-block-lg: 1.25rem; /* Large */ + --denhaag-space-block-md: 1rem; /* Medium */ + --denhaag-space-block-sm: 0.8rem; /* Small */ + --denhaag-space-block-xs: 0.5rem; /* Extra Small */ + --denhaag-space-block-2xs: 0.25rem; /* Extra Small 2 */ + --denhaag-space-block-3xs: 0.125rem; /* Extra Small 3 */ + --denhaag-focus-border-style: dashed; + --denhaag-focus-border-width: 2px; + --denhaag-border-radius: 3px; + --denhaag-unordered-list-lower-alpha-list-style-type: lower-alpha; + --denhaag-unordered-list-marker-font-size: 1rem; + --denhaag-timeline-step-padding: 12px; + --denhaag-timeline-step-outline-offset: 2px; + --denhaag-timeline-step-content-margin: 12px; + --denhaag-timeline-step-collapse-icon-padding: 4px; + --denhaag-timeline-step-collapse-icon-size: 16px; + --denhaag-timeline-step-label-active-font-weight: 700; + --denhaag-timeline-step-icon-size: 20px; + --denhaag-timeline-step-icon-padding: 12px; + --denhaag-timeline-step-icon-margin: auto; + --denhaag-timeline-line-height: 24px; + --denhaag-tabs-tab-panel-outline: 0; + --denhaag-tabs-tab-panel-padding-inline-end: 0; + --denhaag-tabs-tab-panel-padding-inline-start: 0; + --denhaag-tabs-tab-panel-padding-block-end: 0; + --denhaag-tabs-tab-panel-padding-block-start: 0; + --denhaag-tabs-tab-indicator-bottom: 0; + --denhaag-tabs-tab-indicator-border-width: 2px; + --denhaag-tabs-tab-outline: 0; + --denhaag-tabs-tab-line-height: 1.5; + --denhaag-tabs-tab-cursor: default; + --denhaag-tabs-width: 100%; + --denhaag-tabs-border-style: solid; + --denhaag-tabs-border-width: 2px; + --denhaag-table-scroll-buttons-justify-content: flex-end; + --denhaag-table-scroll-buttons-flex-direction: initial; + --denhaag-table-wrapper-position: relative; + --denhaag-table-container-shadow-right-right: 0; + --denhaag-table-container-shadow-left-transform: matrix( + -1, + 0, + 0, + 1, + 0, + 0 + ); + --denhaag-table-container-shadow-left-left: 0; + --denhaag-table-container-shadow-bottom: 0; + --denhaag-table-container-shadow-background: linear-gradient( + 270deg, + rgba( 0, 0, 0, 0.1 ) 0%, + rgba( 255, 255, 255, 0 ) 76.92% + ); + --denhaag-table-container-shadow-position: absolute; + --denhaag-table-container-shadow-height: inherit; + --denhaag-table-container-shadow-group-display: contents; + --denhaag-table-container-shadow-group-bottom: 0; + --denhaag-table-container-shadow-group-position: absolute; + --denhaag-table-container-shadow-group-width: inherit; + --denhaag-table-container-overflow-x: auto; + --denhaag-table-heading-min-width: 7.5rem; + --denhaag-table-row-padding-block-start: 0.75rem; + --denhaag-table-row-padding-block-end: 0.75rem; + --denhaag-table-cell-min-width: 7.5rem; + --denhaag-table-border-spacing: 0; + --denhaag-table-max-width: 100%; + --denhaag-table-width: 100%; + --denhaag-step-marker-connector-outline-width: 1px; + --denhaag-step-marker-nested-icon-size: 10px; + --denhaag-step-marker-nested-size: 16px; + --denhaag-step-marker-icon-size: 20px; + --denhaag-step-marker-size: 32px; + --denhaag-step-marker-padding: 12px; + --denhaag-step-marker-margin: 0; + --denhaag-step-marker-font-weight: 400; + --denhaag-step-marker-border-width: 2px; + --denhaag-sidenav-list-child-margin-inline-start: 24px; + --denhaag-sidenav-link-child-padding-inline-start: 16px; + --denhaag-sidenav-link-padding-block-end: 12px; + --denhaag-sidenav-link-padding-block-start: 12px; + --denhaag-sidenav-item-margin-inline-end: 0; + --denhaag-sidenav-item-margin-inline-start: 0; + --denhaag-sidenav-item-margin-block-end: 0; + --denhaag-sidenav-item-margin-block-start: 0; + --denhaag-sidenav-item-line-height: 1.5; + --denhaag-sidenav-item-height: 48px; + --denhaag-sidenav-mobile-display: none; + --denhaag-sidenav-min-width: 14.5rem; + --denhaag-sidenav-flex-direction: column; + --denhaag-sidenav-display: flex; + --denhaag-sheet-overlay-desktop-top: 7.5rem; + --denhaag-sheet-overlay-tablet-top: 6rem; + --denhaag-sheet-overlay-z-index: 1; + --denhaag-sheet-overlay-width: 100vw; + --denhaag-sheet-overlay-top: 4.5rem; + --denhaag-sheet-overlay-position: fixed; + --denhaag-sheet-overlay-left: 0; + --denhaag-sheet-overlay-height: 100vh; + --denhaag-sheet-overlay-background-color: rgb( 0 0 0 / 50% ); + --denhaag-sheet-close-button-float: right; + --denhaag-sheet-container-menu-display: grid; + --denhaag-sheet-container-margin-block-end: 4rem; + --denhaag-sheet-dialog-backdrop-top: 0; + --denhaag-sheet-dialog-top: 0; + --denhaag-sheet-dialog-padding-inline-start: 0; + --denhaag-sheet-dialog-padding-inline-end: 0; + --denhaag-sheet-dialog-padding-block-start: 0; + --denhaag-sheet-dialog-padding-block-end: 0; + --denhaag-sheet-dialog-overflow-y: hidden; + --denhaag-sheet-dialog-max-width: 100%; + --denhaag-sheet-dialog-max-height: fit-content; + --denhaag-sheet-dialog-margin-block-start: 0; + --denhaag-sheet-dialog-border: none; + --denhaag-sheet-desktop-top: 7.5rem; + --denhaag-sheet-desktop-padding-block-start: 24px; + --denhaag-sheet-desktop-min-height: 15rem; + --denhaag-sheet-title-margin-block-end: 16px; + --denhaag-sheet-title-font-size: 18px; + --denhaag-sheet-z-index: 3; + --denhaag-sheet-width: 100%; + --denhaag-sheet-top: 4.5rem; + --denhaag-sheet-position: absolute; + --denhaag-sheet-overflow-x: hidden; + --denhaag-sheet-min-height: 100vh; + --denhaag-sheet-left: flex0; + --denhaag-responsive-content-lg-max-width: 67.5rem; + --denhaag-responsive-content-md-max-width: 56.5rem; + --denhaag-responsive-content-sm-max-width: 40.5rem; + --denhaag-responsive-content-xs-padding: 1.5rem; + --denhaag-responsive-content-2xs-padding: 0.75rem; + --denhaag-radio-checked-inner-size: 6px; + --denhaag-process-steps-step-meta-date-font-size: 20px; + --denhaag-process-steps-step-meta-font-size: 16px; + --denhaag-process-steps-step-padding: 12px; + --denhaag-process-steps-step-outline-offset: 2px; + --denhaag-process-steps-step-content-margin: 12px; + --denhaag-process-steps-step-collapse-icon-padding: 4px; + --denhaag-process-steps-step-collapse-icon-size: 16px; + --denhaag-process-steps-step-header-align-items: center; + --denhaag-process-steps-line-height: 24px; + --denhaag-posttypelabel-text-transform: uppercase; + --denhaag-posttypelabel-letter-spacing: 1px; + --denhaag-posttypelabel-line-height: 1.5; + --denhaag-posttypelabel-font-weight: 700; + --denhaag-pagination-link-background-color: transparent; + --denhaag-pagination-margin-inline: 0.625rem; + --denhaag-page-content-main-md-margin-block-start: 4em; + --denhaag-page-content-main-sm-margin-block-start: 3.5rem; + --denhaag-page-content-main-margin-block-start: 1rem; + --denhaag-page-header-index: 2; + --denhaag-page-buttons-option-margin-inline-start: 0.5rem; + --denhaag-page-buttons-option-min-height: 2.594rem; + --denhaag-page-buttons-option-min-width: 2.75rem; + --denhaag-page-buttons-icon-max-width: 1.1875rem; + --denhaag-page-buttons-icon-max-height: 1.25rem; + --denhaag-page-buttons-icon-margin-inline-end: 0.75rem; + --denhaag-page-buttons-outline-dark-action-margin-block-end: 0.75rem; + --denhaag-page-buttons-outline-dark-action-margin-inline-end: 0.75rem; + --denhaag-page-buttons-outline-dark-action-min-width: 6.25rem; + --denhaag-page-buttons-margin-block-end: 2rem; + --denhaag-page-buttons-margin-block-start: 0.75rem; + --denhaag-note-line-height: 1.5; + --denhaag-note-font-weight: 400; + --denhaag-note-font-size: 1.125rem; + --denhaag-modal-title-line-height: 1.3; + --denhaag-modal-title-font-weight: 700; + --denhaag-modal-title-font-style: normal; + --denhaag-modal-paragraph-margin: 1em; + --denhaag-modal-paragraph-line-height: 1.5; + --denhaag-modal-inner-padding-inline: 1rem; + --denhaag-modal-inner-padding-block: 1rem; + --denhaag-modal-icon-size: 14px; + --denhaag-modal-icon-padding-inline: 5px; + --denhaag-modal-icon-padding-block: 5px; + --denhaag-modal-icon-border-width: 0; + --denhaag-modal-icon-border-style: solid; + --denhaag-modal-icon-border-color: transparent; + --denhaag-modal-icon-background-color: transparent; + --denhaag-modal-width: 765px; + --denhaag-modal-max-height: 38.375rem; + --denhaag-modal-index: 12; + --denhaag-modal-offset-y: 68px; + --denhaag-modal-display: none; + --denhaag-mobile-menu-list-submenu-back-button-padding-inline-end: 24px; + --denhaag-mobile-menu-list-submenu-back-button-padding-inline-start: 0; + --denhaag-mobile-menu-list-submenu-back-button-padding-block-end: 20px; + --denhaag-mobile-menu-list-submenu-back-button-padding-block-start: 20px; + --denhaag-mobile-menu-list-submenu-back-button-border: 0; + --denhaag-mobile-menu-list-submenu-back-button-background-color: transparent; + --denhaag-mobile-menu-list-submenu-back-button-align-self: baseline; + --denhaag-mobile-menu-list-submenu-open-display: flex; + --denhaag-mobile-menu-list-submenu-title-display: flex; + --denhaag-mobile-menu-list-submenu-title-align-items: center; + --denhaag-mobile-menu-list-submenu-width: 100%; + --denhaag-mobile-menu-list-submenu-top: 0; + --denhaag-mobile-menu-list-submenu-position: absolute; + --denhaag-mobile-menu-list-submenu-left: 100vw; + --denhaag-mobile-menu-list-submenu-flex-direction: column; + --denhaag-mobile-menu-list-submenu-display: none; + --denhaag-mobile-menu-list-item-button-large-font-weight: 700; + --denhaag-mobile-menu-list-item-button-large-font-size: 20px; + --denhaag-mobile-menu-list-item-button-width: 100%; + --denhaag-mobile-menu-list-item-button-text-decoration: none; + --denhaag-mobile-menu-list-item-button-padding-inline: 0; + --denhaag-mobile-menu-list-item-button-padding-block: 0; + --denhaag-mobile-menu-list-item-button-margin-inline: 0; + --denhaag-mobile-menu-list-item-button-margin-block: 0; + --denhaag-mobile-menu-list-item-button-justify-content: space-between; + --denhaag-mobile-menu-list-item-button-display: flex; + --denhaag-mobile-menu-list-item-button-border: 0; + --denhaag-mobile-menu-list-item-button-appearance: none; + --denhaag-mobile-menu-list-item-button-align-items: center; + --denhaag-mobile-menu-list-item-button-color: auto; + --denhaag-mobile-menu-list-item-button-background-color: transparent; + --denhaag-mobile-menu-list-item-button-font-size: inherit; + --denhaag-mobile-menu-list-item-expanded-list-open-display: block; + --denhaag-mobile-menu-list-item-expanded-list-padding-inline-start: 0; + --denhaag-mobile-menu-list-item-expanded-list-list-style: none; + --denhaag-mobile-menu-list-item-expanded-list-display: none; + --denhaag-mobile-menu-list-item-active-icon-transform: scaleY( -1 ); + --denhaag-mobile-menu-list-item-outline-style: none; + --denhaag-mobile-menu-list-item-min-block-size: 58px; + --denhaag-mobile-menu-list-item-flex-direction: column; + --denhaag-mobile-menu-list-item-display: flex; + --denhaag-mobile-menu-list-padding-inline-start: 0; + --denhaag-mobile-menu-list-expandable-item-border-bottom: none; + --denhaag-mobile-menu-list-expandable-open-display: block; + --denhaag-mobile-menu-list-expandable-display: none; + --denhaag-mobile-menu-scrolled-transform: translateX( -100vw ); + --denhaag-mobile-menu-will-change: transform; + --denhaag-mobile-menu-transition-duration: 200ms; + --denhaag-menu-group-spacing: 40px; + --denhaag-menu-button-chevron-size: 12px; + --denhaag-menu-button-chevron-padding-inline-start: 4px; + --denhaag-menu-button-line-height: 21px; + --denhaag-list-subheader-font-weight: 700; + --denhaag-list-item-text-multiline-primary-line-height: 32px; + --denhaag-list-item-text-secondary-padding-block-end: 8px; + --denhaag-list-item-text-secondary-line-height: 16px; + --denhaag-list-item-text-secondary-font-weight: 400; + --denhaag-list-item-text-primary-font-weight: 400; + --denhaag-list-item-text-primary-font-size: 1rem; + --denhaag-list-item-icon-margin-inline-end: 24px; + --denhaag-list-item-secondary-padding-block: 8px; + --denhaag-list-item-active-border-size: 2px; + --denhaag-list-item-secondary-action-margin-inline-start: 24px; + --denhaag-list-item-padding-block: 12px; + --denhaag-list-item-padding-inline: 16px; + --denhaag-list-wrapper-padding-block: 8px; + --denhaag-list-wrapper-margin-block: 8px; + --denhaag-link-external-icon-align: center; + --denhaag-link-small-icon-size: 0.5rem; + --denhaag-link-with-icon-vertical-align: bottom; + --denhaag-link-icon-size: 1.25rem; + --denhaag-link-icon-font-size: 1em; + --denhaag-link-icon-align: flex-start; + --denhaag-link-text-decoration: underline; + --denhaag-link-cursor: pointer; + --denhaag-link-group-link-icon-denhaag-icon-height: 0.85rem; + --denhaag-link-group-link-icon-denhaag-icon-align-self: start; + --denhaag-link-group-link-icon-width: 0.625rem; + --denhaag-link-group-link-icon-font-size: 0.75rem; + --denhaag-link-group-link-with-icon-start-padding-block-end: 0; + --denhaag-link-group-link-with-icon-start-padding-block-start: 0; + --denhaag-link-group-link-with-icon-start-display: inline-flex; + --denhaag-link-group-link-hover-text-decoration: underline; + --denhaag-link-group-list-padding-inline-start: 0; + --denhaag-link-group-list-list-style: none; + --denhaag-link-group-caption-margin-block: 0; + --denhaag-link-group-image-object-fit: cover; + --denhaag-link-group-image-size: 8.75rem; + --denhaag-language-switcher-list-item-button-icon-size: 1rem; + --denhaag-language-switcher-list-item-button-icon-inset-block-start: -1px; + --denhaag-language-switcher-list-item-button-icon-gap: 6px; + --denhaag-language-switcher-list-item-button-text-underline-offset: 1px; + --denhaag-language-switcher-list-item-button-text-decoration: none; + --denhaag-language-switcher-list-item-button-hover-text-decoration: underline; + --denhaag-language-switcher-list-item-link-active-icon-padding-block-start: 0; + --denhaag-language-switcher-list-item-link-active-icon-padding-inline-start: 5px; + --denhaag-language-switcher-list-item-link-active-icon-margin-inline-end: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-inline-start: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-block-end: auto; + --denhaag-language-switcher-list-item-link-active-icon-margin-block-start: auto; + --denhaag-language-switcher-list-item-mobile-padding-block-end: 16px; + --denhaag-language-switcher-list-item-mobile-padding-block-start: 16px; + --denhaag-language-switcher-list-item-tablet-padding-block-end: 12px; + --denhaag-language-switcher-list-item-tablet-padding-block-start: 12px; + --denhaag-language-switcher-list-item-padding-block-end: 8px; + --denhaag-language-switcher-list-item-padding-block-start: 8px; + --denhaag-language-switcher-list-item-list-style: none; + --denhaag-language-switcher-list-padding-inline-start: 0; + --denhaag-language-switcher-list-margin-inline-start: 0; + --denhaag-language-switcher-list-margin-block-end: 16px; + --denhaag-language-switcher-list-margin-block-start: 0; + --denhaag-language-switcher-list-padding-block-start: 16px; + --denhaag-language-switcher-mobile-title-display: none; + --denhaag-image-margin-block-end-desktop: 2rem; + --denhaag-image-margin-block-end-mobile: 1.5rem; + --denhaag-image-margin-inline: 0; + --denhaag-image-image-width: 100%; + --denhaag-image-image-height: auto; + --denhaag-image-image-display: block; + --denhaag-image-figcaption-text-line-height: 1.5; + --denhaag-image-figcaption-padding-block: 1rem; + --denhaag-image-figcaption-gap: 1rem; + --denhaag-image-figcaption-justify-content: space-between; + --denhaag-image-figcaption-download-only-vertical-align: bottom; + --denhaag-image-figcaption-download-only-width: 100%; + --denhaag-image-figcaption-download-only-justify-content: flex-end; + --denhaag-image-figcaption-download-only-display: inline-flex; + --denhaag-image-figcaption-download-text-decoration: none; + --denhaag-image-figcaption-download-margin-inline-start: 1rem; + --denhaag-image-figcaption-download-line-height: 1; + --denhaag-image-figcaption-download-font-size: 1.125rem; + --denhaag-image-figcaption-download-display: flex; + --denhaag-image-figcaption-download-gap: 0.5rem; + --denhaag-image-figcaption-download-align-items: flex-end; + --denhaag-image-figcaption-display: grid; + --denhaag-image-figcaption-align-items: flex-start; + --denhaag-image-download-text-width: max-content; + --denhaag-image-download-text-display-desktop: inline; + --denhaag-image-download-text-display-mobile: none; + --denhaag-icon-button-focus-outline-offset: 0px; + --denhaag-icon-button-padding-inline-end: 2px; + --denhaag-icon-button-padding-inline-start: 2px; + --denhaag-icon-button-padding-block-end: 2px; + --denhaag-icon-button-padding-block-start: 2px; + --denhaag-highlighted-links-list-grid-template-columns-3: repeat( 3, 1fr ); + --denhaag-highlighted-links-list-grid-template-columns-2: repeat( 2, 1fr ); + --denhaag-highlighted-links-list-grid-template-columns: repeat( 2, 1fr ); + --denhaag-highlighted-links-list-display: grid; + --denhaag-highlighted-links-width: 100%; + --denhaag-hero-theme-page-content-transform: 2rem; + --denhaag-hero-theme-page-content-padding-block: 4rem; + --denhaag-hero-theme-page-content-text-align: center; + --denhaag-hero-theme-page-content-column-end-xl: 8; + --denhaag-hero-theme-page-content-column-end-s: 10; + --denhaag-hero-theme-page-content-column-end: 12; + --denhaag-hero-theme-page-content-column-start-xl: 3; + --denhaag-hero-theme-page-content-column-start-s: 2; + --denhaag-hero-theme-page-content-column-start: 1; + --denhaag-hero-theme-page-container-padding-block-start-xl: 7rem; + --denhaag-hero-theme-page-container-padding-block-start-s: 3.5rem; + --denhaag-hero-theme-page-container-padding-block-start: 0; + --denhaag-hero-theme-page-image-pattern-height: auto; + --denhaag-hero-theme-page-image-pattern-width: 100%; + --denhaag-hero-theme-page-image-pattern-container-overflow: hidden; + --denhaag-hero-theme-page-image-pattern-container-size: 100%; + --denhaag-hero-theme-page-image-pattern-container-position: absolute; + --denhaag-hero-theme-page-image-start-m: 5; + --denhaag-hero-theme-page-image-start-s: 4; + --denhaag-hero-theme-page-image-path: 11.25rem; + --denhaag-hero-theme-page-min-height: 0; + --denhaag-hero-routing-shape-start-xl: -0.25; + --denhaag-hero-routing-shape-start-l: 0; + --denhaag-hero-routing-shape-start: 1; + --denhaag-hero-routing-shape-background-color: #fae166; + --denhaag-hero-routing-title-margin-block-start: 0; + --denhaag-hero-routing-title-margin-block-end: 0; + --denhaag-hero-routing-image-path: 2.8125rem; + --denhaag-hero-routing-content-column-offset-xl: 2; + --denhaag-hero-routing-content-column-offset-l: -0.2; + --denhaag-hero-routing-content-column-offset: 0; + --denhaag-hero-routing-content-column-end-xl: 6; + --denhaag-hero-routing-content-column-end-s: 8; + --denhaag-hero-routing-content-column-end: 12; + --denhaag-hero-routing-content-column-start-xl: 3; + --denhaag-hero-routing-content-column-start: 1; + --denhaag-hero-routing-content-align-self: center; + --denhaag-hero-routing-min-height-m: 15rem; + --denhaag-hero-routing-min-height-s: 12rem; + --denhaag-hero-routing-min-height: 9rem; + --denhaag-hero-home-title-margin-block-start: 0; + --denhaag-hero-home-title-margin-block-end: 0; + --denhaag-hero-home-image-path: 11.25rem; + --denhaag-hero-home-content-column-offset-m: 1; + --denhaag-hero-home-content-column-offset-s: 2; + --denhaag-hero-home-content-column-offset: 0; + --denhaag-hero-home-content-column-end-l: 5; + --denhaag-hero-home-content-column-end-m: 6; + --denhaag-hero-home-content-column-end-s: 7; + --denhaag-hero-home-content-column-end: 12; + --denhaag-hero-home-content-column-start-xl: 2; + --denhaag-hero-home-content-column-start: 1; + --denhaag-hero-home-content-padding-block: 5.75rem; + --denhaag-hero-home-content-align-self: center; + --denhaag-hero-home-min-height-m: 30rem; + --denhaag-hero-home-min-height-s: 28rem; + --denhaag-hero-home-min-height: 20rem; + --denhaag-hero-container-padding-l: 0; + --denhaag-hero-container-max-width-xl: 98rem; + --denhaag-hero-container-max-width-l: 67.5rem; + --denhaag-hero-container-max-width-m: 56.5rem; + --denhaag-hero-container-max-width-s: 40.5rem; + --denhaag-hero-container-max-width-xs: 20rem; + --denhaag-hero-container-max-width: 100%; + --denhaag-hero-columns: 12; + --denhaag-header-mobile-actions-desktop-display: none; + --denhaag-header-mobile-actions-display: flex; + --denhaag-header-actions-desktop-action-margin-inline-start: 24px; + --denhaag-header-actions-desktop-display: flex; + --denhaag-header-actions-display: none; + --denhaag-header-content-justify-content: space-between; + --denhaag-header-content-flex-direction: row; + --denhaag-header-content-display: flex; + --denhaag-header-content-align-items: center; + --denhaag-header-md-height: 7.5rem; + --denhaag-header-sm-height: 6rem; + --denhaag-header-height: 4.5rem; + --denhaag-header-border-bottom-style: solid; + --denhaag-header-border-bottom-width: 1px; + --denhaag-form-progress-progress-height: 2px; + --denhaag-form-progress-header-margin-block-end: 20px; + --denhaag-form-input-margin-block-end: 0; + --denhaag-form-input-margin-block-start: 0; + --denhaag-form-group-margin-block-end: 8px; + --denhaag-form-group-margin-block-start: 8px; + --denhaag-form-group-margin-inline-end: 8px; + --denhaag-form-group-margin-inline-start: 8px; + --denhaag-form-group-helper-text-margin-block-start: 4px; + --denhaag-form-control-label-input-margin-inline-end: 8px; + --denhaag-form-control-label-margin-block-end: 8px; + --denhaag-footer-legal-links-column-gap: 32px; + --denhaag-footer-group-padding-block-end: 40px; + --denhaag-footer-group-padding-block-start: 40px; + --denhaag-footer-group-gap: 32px; + --denhaag-footer-paragraph-margin-block-end: 12px; + --denhaag-footer-paragraph-margin-block-start: 12px; + --denhaag-footer-font-size: 16px; + --denhaag-floating-contact-status-size: 0.5rem; + --denhaag-floating-contact-status-border-width: 0.0625rem; + --denhaag-floating-contact-active-overlay-display: flex; + --denhaag-floating-contact-active-switch-icons-display: flex; + --denhaag-floating-contact-active-switch-direction: row; + --denhaag-floating-contact-overlay-width: 17.25rem; + --denhaag-floating-contact-overlay-display: none; + --denhaag-floating-contact-overlay-border-radius: 0.25rem; + --denhaag-floating-contact-overlay-align-items: flex-start; + --denhaag-floating-contact-switch-icons-gap: 0.75rem; + --denhaag-floating-contact-switch-icons-display: none; + --denhaag-floating-contact-switch-icon-size: 1rem; + --denhaag-floating-contact-switch-line-height: 1; + --denhaag-floating-contact-switch-gap: 0; + --denhaag-floating-contact-switch-direction: row-reverse; + --denhaag-floating-contact-switch-border-radius: 1.5rem; + --denhaag-floating-contact-switch-border-width: 0.0625rem; + --denhaag-floating-contact-switch-border-style: solid; + --denhaag-floating-contact-switch-align-items: center; + --denhaag-floating-contact-switch-align-self: flex-end; + --denhaag-floating-contact-link-outline-color: currentColor; + --denhaag-floating-contact-link-decoration: underline; + --denhaag-floating-contact-item-icon-size: 1.75rem; + --denhaag-floating-contact-item-align-items: center; + --denhaag-floating-contact-index: 9; + --denhaag-floating-contact-position: fixed; + --denhaag-floating-contact-gap: 0.75rem; + --denhaag-file-link-icon-width: 20px; + --denhaag-file-border-style: solid; + --denhaag-file-border-width: 1px; + --denhaag-event-date-text-line-height: 1.75; + --denhaag-event-date-icon-margin-inline-end: 0.5rem; + --denhaag-dynamic-content-focus-icon-opacity: 1; + --denhaag-dynamic-content-hover-icon-opacity: 1; + --denhaag-dynamic-content-m-grid-columns: 3; + --denhaag-dynamic-content-s-grid-columns: 2; + --denhaag-dynamic-content-grid-columns: 1; + --denhaag-dynamic-content-icon-opacity: 0; + --denhaag-dynamic-content-card-title-hyphens: auto; + --denhaag-dot-indicator-border-size: 2px; + --denhaag-dot-indicator-size: 12px; + --denhaag-divider-margin-inline-end: 16px; + --denhaag-divider-margin-inline-start: 16px; + --denhaag-divider-margin-block-end: 16px; + --denhaag-divider-margin-block-start: 16px; + --denhaag-divider-border-width: 1px; + --denhaag-description-list-title-padding-block-start: 0.75rem; + --denhaag-description-list-detail-padding-block-end: 0.75rem; + --denhaag-description-list-caption-line-height: 1.3; + --denhaag-description-list-line-height: 1.5; + --denhaag-description-list-font-size: 1.125rem; + --denhaag-description-list-margin-block-end: 0; + --denhaag-description-list-margin-block-start: 0; + --denhaag-datepicker-error-icon-inset-inline-end: 8px; + --denhaag-datepicker-error-icon-font-size: 18px; + --denhaag-datepicker-calendar-navigation-font-size: 20px; + --denhaag-datepicker-calendar-table-border-spacing: 8px; + --denhaag-datepicker-calendar-day-line-height: 24px; + --denhaag-datepicker-calendar-day-font-size: 18px; + --denhaag-datepicker-calendar-day-width: 32px; + --denhaag-datepicker-calendar-day-border-radius: 3px; + --denhaag-datepicker-calendar-heading-font-weight: 300; + --denhaag-datepicker-calendar-month-font-weight: 500; + --denhaag-datepicker-calendar-month-line-height: 24px; + --denhaag-datepicker-calendar-month-font-size: 18px; + --denhaag-datepicker-calendar-header-padding-block-end: 4px; + --denhaag-datepicker-calendar-header-height: 48px; + --denhaag-datepicker-calendar-padding-block-end: 16px; + --denhaag-datepicker-calendar-padding-inline: 12px; + --denhaag-datepicker-calendar-border-width: 1px; + --denhaag-datepicker-calendar-border-style: solid; + --denhaag-datepicker-calendar-border-radius: 3px; + --denhaag-datepicker-button-font-size: 20px; + --denhaag-datepicker-button-inset-inline-end: 12px; + --denhaag-datepicker-input-hover-border-width: 2px; + --denhaag-datepicker-input-padding-inline: 12px; + --denhaag-datepicker-input-line-height: 24px; + --denhaag-datepicker-input-height: 52px; + --denhaag-datepicker-input-border-width: 1px; + --denhaag-datepicker-input-border-style: solid; + --denhaag-datepicker-input-border-radius: 3px; + --denhaag-datepicker-width: 100%; + --denhaag-cta-link-text-decoration: none; + --denhaag-cta-link-excerpt-line-height: 1.3; + --denhaag-cta-image-content-button-after-left: 0; + --denhaag-cta-image-content-button-after-bottom: 0; + --denhaag-cta-image-content-button-after-right: 0; + --denhaag-cta-image-content-button-after-top: 0; + --denhaag-cta-image-content-button-after-content: ''; + --denhaag-cta-image-content-button-after-position: absolute; + --denhaag-cta-image-content-button-position: initial; + --denhaag-cta-image-content-text-line-height: 1.3; + --denhaag-cta-image-content-title-margin-block-start: initial; + --denhaag-cta-image-content-image-object-fit: cover; + --denhaag-cta-image-content-image-width: 100%; + --denhaag-cta-image-content-filled-border: 0; + --denhaag-cta-image-content-hover-box-shadow: 0 0.25rem 1rem 0 + rgba( 0, 0, 0, 0.16 ); + --denhaag-cta-image-content-display: block; + --denhaag-cta-image-content-position: relative; + --denhaag-cta-event-date-line-height: 1.25; + --denhaag-cta-event-line-height: 1.3; + --denhaag-cta-download-line-height: 1.3; + --denhaag-contact-timeline-mobile-meta-marker-size: 4px; + --denhaag-contact-timeline-mobile-meta-gap: 6px; + --denhaag-contact-timeline-mobile-step-padding-block-end: 32px; + --denhaag-contact-timeline-mobile-step-distance: 0; + --denhaag-contact-timeline-mobile-step-marker-connector-bottom: 0; + --denhaag-contact-timeline-mobile-step-marker-margin: 5px; + --denhaag-contact-timeline-mobile-step-marker-align-items: flex-start; + --denhaag-checkbox-hover-border-width: 1px; + --denhaag-card-title-padding: 0; + --denhaag-card-title-line-height: 1.3; + --denhaag-card-subtitle-padding: 0; + --denhaag-card-subtitle-line-height: 1.5; + --denhaag-card-wrapper-padding: 24px; + --denhaag-card-case-title-line-height: 24px; + --denhaag-card-case-padding-block-start: 20px; + --denhaag-card-case-padding-block-end: 24px; + --denhaag-card-case-height: 200px; + --denhaag-card-case-border-width: 0; + --denhaag-card-arrow-right: 28px; + --denhaag-card-arrow-position: relative; + --denhaag-card-arrow-left: 0; + --denhaag-card-actions-padding-inline-start: 0; + --denhaag-card-actions-padding-inline-end: 0; + --denhaag-card-actions-padding-block-start: 8px; + --denhaag-card-actions-padding-block-end: 0; + --denhaag-card-width: 352px; + --denhaag-card-height: 181px; + --denhaag-card-border-width: 1px; + --denhaag-card-border-radius: 3px; + --denhaag-card-news-icon-text-align: right; + --denhaag-card-news-content-padding: 0.75rem; + --denhaag-card-news-image-aspect-ratio: 16 / 9; + --denhaag-card-news-image-object-fit: cover; + --denhaag-card-news-image-height: auto; + --denhaag-card-news-image-width: 100%; + --denhaag-card-news-margin: 0; + --denhaag-card-news-text-decoration: none; + --denhaag-card-group-xl-gap: 40px; + --denhaag-card-group-l-gap: 32px; + --denhaag-card-group-m-gap: 24px; + --denhaag-card-group-s-gap: 16px; + --denhaag-card-group-gap: 32px; + --denhaag-card-authentication-title-margin-block-end: 18px; + --denhaag-card-authentication-logo-size: 56px; + --denhaag-card-authentication-header-margin-block-end: 0px; + --denhaag-card-authentication-footer-margin-block-start: 8px; + --denhaag-card-authentication-portrait-logo-margin-block-end: 24px; + --denhaag-card-authentication-portrait-logo-size: 80px; + --denhaag-card-authentication-portrait-header-margin-block-end: 8px; + --denhaag-card-authentication-portrait-footer-margin-block-start: 16px; + --denhaag-card-authentication-portrait-min-inline-size: 283px; + --denhaag-card-authentication-portrait-min-block-size: 415px; + --denhaag-card-authentication-portrait-max-inline-size: 362px; + --denhaag-button-icon-only-height: 2.6875rem; + --denhaag-button-large-size-line-height: 1.75; + --denhaag-button-large-size-padding-block: 0.40625rem; + --denhaag-button-border-width: 1px; + --denhaag-button-cursor: pointer; + --denhaag-breadcrumb-list-max-width: 67.5rem; + --denhaag-breadcrumb-link-hover-text-decoration: underline; + --denhaag-breadcrumb-link-focus-text-decoration: underline; + --denhaag-breadcrumb-link-icon-margin-inline: 0.75rem; + --denhaag-breadcrumb-link-icon-width: 0.875rem; + --denhaag-breadcrumb-link-icon-height: 0.875rem; + --denhaag-breadcrumb-link-text-decoration: none; + --denhaag-breadcrumb-padding-inline: 0.75rem; + --denhaag-breadcrumb-padding-block-md: 0.75rem; + --denhaag-breadcrumb-padding-block: 1rem; + --denhaag-blockquote-paragraph-line-height: 1.3; + --denhaag-blockquote-paragraph-font-weight: 700; + --denhaag-blockquote-padding-inline-end: 1rem; + --denhaag-blockquote-padding-inline-start: 1rem; + --denhaag-blockquote-padding-block-end: 1rem; + --denhaag-blockquote-padding-block-start: 1rem; + --denhaag-blockquote-margin-inline-end: 0; + --denhaag-blockquote-margin-inline-start: 0; + --denhaag-blockquote-margin-block-end: 0; + --denhaag-blockquote-margin-block-start: 0; + --denhaag-blockquote-border-style: solid; + --denhaag-blockquote-border-width: 4px; + --denhaag-blockquote-attribution-margin-block-start: 1rem; + --denhaag-blockquote-attribution-line-height: 1.5; + --denhaag-blockquote-attribution-font-weight: 400; + --denhaag-article-meta-horizontal-item-border-style: solid; + --denhaag-article-meta-horizontal-item-border-width: 1px; + --denhaag-article-meta-gap: 0.75rem; + --denhaag-article-meta-border-style: solid; + --denhaag-article-meta-border-width: 1px; + --denhaag-anchor-navigation-link-width: 2px; + --denhaag-anchor-navigation-link-text-decoration: none; + --denhaag-anchor-navigation-link-padding-inline-start: 1.125rem; + --denhaag-anchor-navigation-link-padding-inline-end: 0; + --denhaag-anchor-navigation-link-line-height: 1.5; + --denhaag-anchor-navigation-list-list-style: none; + --denhaag-anchor-collapse-summary-text-align: left; + --denhaag-anchor-collapse-rotate: -180deg; + --denhaag-anchor-collapse-border-width: 1px; + --denhaag-anchor-collapse-border-style: solid; + --denhaag-alert-close-focus-border-offset: 3px; + --denhaag-alert-close-focus-border-style: 1px; + --denhaag-alert-close-focus-border-width: 1px; + --denhaag-alert-close-focus-border-color: 1px; + --denhaag-alert-border-radius: 1px; + --denhaag-action-warning-icon-width: 20px; + --denhaag-action-link-icon-width: 20px; + --denhaag-action-border-width: 1px; + --denhaag-action-border-style: solid; + --denhaag-accordion-details-open-display: block; + --denhaag-accordion-details-display: none; + --denhaag-accordion-details-margin-inline-end: calc( + ( 2 * 1rem ) + ( 2 * 0.75rem ) + ); + --denhaag-accordion-details-padding-block-start: 0; + --denhaag-accordion-icon-top: 0.75rem; + --denhaag-accordion-icon-position: absolute; + --denhaag-accordion-title-padding-block: 0.75rem; + --denhaag-accordion-title-flex-grow: 1; + --denhaag-accordion-panel-text-decoration: none; + --denhaag-accordion-panel-padding-block: 0; + --denhaag-accordion-panel-min-height: calc( 4 * 0.75rem ); + --denhaag-accordion-panel-margin-block: 0; + --denhaag-accordion-panel-outline: 0; + --denhaag-accordion-panel-display: flex; + --denhaag-accordion-panel-border-radius: 0; + --denhaag-accordion-panel-background-color: transparent; + --denhaag-accordion-panel-align-items: center; + --denhaag-accordion-container-open-icon-transform: rotate( 180deg ); + --denhaag-accordion-container-position: relative; + --denhaag-accordion-container-border-top: 0; + --utrecht-focus-outline-width: var( --denhaag-focus-border-width ); + --utrecht-focus-outline-style: var( --denhaag-focus-border-style ); + --utrecht-focus-border-style: var( --denhaag-focus-border-style ); + --utrecht-feedback-neutral-color: var( --denhaag-color-blue-4 ); + --utrecht-feedback-neutral-background-color: var( --denhaag-color-blue-1 ); + --utrecht-feedback-neutral-fill-color: var( --denhaag-color-blue-4 ); + --utrecht-feedback-neutral-fill-background-color: var( + --denhaag-color-blue-1 + ); + --utrecht-feedback-safe-color: var( --denhaag-color-green-4 ); + --utrecht-feedback-safe-background-color: var( --denhaag-color-green-1 ); + --utrecht-feedback-safe-fill-color: var( --denhaag-color-green-4 ); + --utrecht-feedback-safe-fill-background-color: var( + --denhaag-color-green-1 + ); + --utrecht-feedback-warning-color: var( --denhaag-color-orange-4 ); + --utrecht-feedback-warning-background-color: var( + --denhaag-color-orange-1 + ); + --utrecht-feedback-warning-fill-color: var( --denhaag-color-orange-4 ); + --utrecht-feedback-warning-fill-background-color: var( + --denhaag-color-orange-1 + ); + --utrecht-feedback-danger-color: var( --denhaag-color-red-4 ); + --utrecht-feedback-danger-background-color: var( --denhaag-color-red-1 ); + --utrecht-feedback-danger-fill-color: var( --denhaag-color-red-4 ); + --utrecht-feedback-danger-fill-background-color: var( + --denhaag-color-red-1 + ); + --utrecht-table-row-padding-inline-start: var( --denhaag-space-inline-xl ); + --utrecht-table-row-padding-inline-end: var( --denhaag-space-inline-xl ); + --utrecht-table-row-border-block-end-color: var( --denhaag-color-grey-1 ); + --utrecht-table-cell-padding-inline-start: var( --denhaag-space-inline-md ); + --utrecht-table-cell-padding-inline-end: var( --denhaag-space-inline-md ); + --utrecht-table-cell-padding-block-start: var( --denhaag-space-block-md ); + --utrecht-table-cell-padding-block-end: var( --denhaag-space-block-md ); + --utrecht-table-cell-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --utrecht-table-heading-color: var( --denhaag-color-green-3 ); + --utrecht-table-header-border-block-end-color: var( + --denhaag-color-grey-1 + ); + --utrecht-table-caption-margin-block-end: var( --denhaag-space-block-xl ); + --utrecht-table-caption-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --utrecht-table-caption-color: var( --denhaag-color-black ); + --utrecht-table-caption-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --utrecht-table-caption-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-table-border-color: var( --denhaag-color-grey-2 ); + --utrecht-separator-color: var( --denhaag-color-grey-2 ); + --utrecht-paragraph-list-margin-block-start: var( + --denhaag-space-block-xl + ); + --utrecht-paragraph-lead-paragraph-margin-block-start: var( + --denhaag-space-block-2xl + ); + --utrecht-paragraph-lead-list-margin-block-start: var( + --denhaag-space-block-2xl + ); + --utrecht-paragraph-lead-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --utrecht-paragraph-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --utrecht-paragraph-font-weight: var( --denhaag-typography-weight-regular ); + --utrecht-paragraph-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-paragraph-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-paragraph-color: var( --denhaag-color-grey-4 ); + --utrecht-page-footer-color: var( --denhaag-color-black ); + --utrecht-link-focus-color: var( --denhaag-color-blue-4 ); + --utrecht-link-color: var( --denhaag-color-blue-3 ); + --utrecht-link-social-hover-color: var( --denhaag-color-ocher-2 ); + --utrecht-link-social-color: var( --denhaag-color-white ); + --utrecht-heading-font-weight: var( --denhaag-typography-weight-bold ); + --utrecht-heading-font-family: var( + --denhaag-typography-sans-serif-alternate-font-family + ); + --utrecht-heading-5-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --utrecht-heading-5-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-heading-4-line-height: var( + --denhaag-typography-scale-lg-line-height + ); + --utrecht-heading-4-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --utrecht-heading-3-line-height: var( + --denhaag-typography-scale-xl-line-height + ); + --utrecht-heading-3-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --utrecht-heading-2-line-height: var( + --denhaag-typography-scale-2xl-line-height + ); + --utrecht-heading-2-font-size: var( + --denhaag-typography-scale-2xl-font-size + ); + --utrecht-heading-1-line-height: var( + --denhaag-typography-scale-3xl-line-height + ); + --utrecht-heading-1-font-size: var( + --denhaag-typography-scale-3xl-font-size + ); + --utrecht-form-toggle-focus-border-style: var( + --denhaag-focus-border-style + ); + --utrecht-form-toggle-focus-border-width: var( + --denhaag-focus-border-width + ); + --utrecht-form-toggle-checked-accent-color: var( --denhaag-color-green-3 ); + --utrecht-form-toggle-color: var( --denhaag-color-white ); + --utrecht-form-toggle-border-color: var( --denhaag-color-grey-3 ); + --utrecht-form-toggle-accent-color: var( --denhaag-color-grey-3 ); + --utrecht-form-label-radio-color: var( --denhaag-color-grey-4 ); + --utrecht-form-label-checkbox-color: var( --denhaag-color-grey-4 ); + --utrecht-form-label-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-form-label-font-weight: var( --denhaag-typography-weight-bold ); + --utrecht-form-label-color: var( --denhaag-color-grey-4 ); + --utrecht-form-field-label-margin-block-end: var( + --denhaag-space-block-2xs + ); + --utrecht-form-field-margin-block-end: var( --denhaag-space-block-lg ); + --utrecht-form-field-margin-block-start: var( --denhaag-space-block-lg ); + --utrecht-form-field-description-invalid-color: var( + --denhaag-color-red-3 + ); + --utrecht-form-field-description-font-weight: var( + --denhaag-typography-weight-regular + ); + --utrecht-form-field-description-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --utrecht-form-field-description-color: var( --denhaag-color-grey-4 ); + --utrecht-form-control-invalid-border-color: var( --denhaag-color-red-3 ); + --utrecht-form-control-disabled-color: var( --denhaag-color-grey-2 ); + --utrecht-form-control-disabled-border-color: var( --denhaag-color-grey-2 ); + --utrecht-form-control-placeholder-color: var( --denhaag-color-grey-4 ); + --utrecht-form-control-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-form-control-color: var( --denhaag-color-grey-4 ); + --utrecht-form-control-border-radius: var( --denhaag-border-radius ); + --utrecht-form-control-border-color: var( --denhaag-color-grey-3 ); + --utrecht-form-control-background-color: var( --denhaag-color-white ); + --utrecht-document-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-document-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-document-color: var( --denhaag-color-black ); + --utrecht-document-background-color: var( --denhaag-color-white ); + --utrecht-data-list-rows-border-bottom-color: var( --denhaag-color-grey-2 ); + --utrecht-data-list-rows-gap: var( --utrecht-space-block-md ); + --utrecht-data-list-rows-item-padding-inline-start: var( + --denhaag-space-inline-xs + ); + --utrecht-data-list-rows-item-margin-block-start: var( + --denhaag-space-inline-md + ); + --utrecht-data-list-item-value-color: var( --denhaag-color-grey-4 ); + --utrecht-data-list-item-key-color: var( --denhaag-color-grey-4 ); + --utrecht-data-list-margin-block-start: var( --denhaag-space-inline-xs ); + --utrecht-data-list-margin-block-end: var( --denhaag-space-inline-xs ); + --utrecht-custom-checkbox-focus-color: var( --denhaag-color-white ); + --utrecht-custom-checkbox-focus-border-color: var( --denhaag-color-grey-3 ); + --utrecht-custom-checkbox-focus-background-color: var( + --denhaag-color-white + ); + --utrecht-custom-checkbox-invalid-color: var( --denhaag-color-white ); + --utrecht-custom-checkbox-invalid-background-color: var( + --denhaag-color-red-3 + ); + --utrecht-custom-checkbox-invalid-border-color: var( + --denhaag-color-red-3 + ); + --utrecht-custom-checkbox-checked-color: var( --denhaag-color-white ); + --utrecht-custom-checkbox-checked-background-color: var( + --denhaag-color-green-3 + ); + --utrecht-custom-checkbox-checked-border-color: var( + --denhaag-color-green-3 + ); + --utrecht-custom-checkbox-disabled-color: var( --denhaag-color-white ); + --utrecht-custom-checkbox-disabled-background-color: var( + --denhaag-color-grey-1 + ); + --utrecht-custom-checkbox-disabled-border-color: var( + --denhaag-color-grey-3 + ); + --utrecht-custom-checkbox-icon-size: var( + --denhaag-typography-scale-lg-font-size + ); + --utrecht-custom-checkbox-color: var( --denhaag-color-white ); + --utrecht-custom-checkbox-border-color: var( --denhaag-color-grey-3 ); + --utrecht-custom-checkbox-background-color: var( --denhaag-color-white ); + --utrecht-button-icon-gap: var( --denhaag-space-inline-xs ); + --utrecht-button-focus-border-style: var( --denhaag-focus-border-style ); + --utrecht-button-focus-border-width: var( --denhaag-focus-border-width ); + --utrecht-button-focus-background-color: var( --denhaag-color-green-4 ); + --utrecht-button-disabled-border-color: var( --denhaag-color-grey-2 ); + --utrecht-button-disabled-color: var( --denhaag-color-white ); + --utrecht-button-disabled-background-color: var( --denhaag-color-grey-2 ); + --utrecht-button-hover-border-color: var( --denhaag-color-green-4 ); + --utrecht-button-hover-color: var( --denhaag-color-white ); + --utrecht-button-hover-background-color: var( --denhaag-color-green-4 ); + --utrecht-button-secondary-action-disabled-color: var( + --denhaag-color-grey-2 + ); + --utrecht-button-secondary-action-disabled-border-color: var( + --denhaag-color-grey-2 + ); + --utrecht-button-secondary-action-disabled-background-color: var( + --denhaag-color-white + ); + --utrecht-button-secondary-action-hover-border-color: var( + --denhaag-color-green-4 + ); + --utrecht-button-secondary-action-hover-color: var( + --denhaag-color-green-4 + ); + --utrecht-button-secondary-action-hover-background-color: var( + --denhaag-color-white + ); + --utrecht-button-secondary-action-border-width: var( + --denhaag-button-border-width + ); + --utrecht-button-secondary-action-border-color: var( + --denhaag-color-green-3 + ); + --utrecht-button-secondary-action-color: var( --denhaag-color-green-3 ); + --utrecht-button-secondary-action-background-color: var( + --denhaag-color-white + ); + --utrecht-button-primary-action-hover-border-color: var( + --denhaag-color-green-4 + ); + --utrecht-button-primary-action-hover-color: var( --denhaag-color-white ); + --utrecht-button-primary-action-hover-background-color: var( + --denhaag-color-green-4 + ); + --utrecht-button-primary-action-focus-border-color: var( + --denhaag-color-green-3 + ); + --utrecht-button-primary-action-focus-color: var( --denhaag-color-white ); + --utrecht-button-primary-action-focus-background-color: var( + --denhaag-color-green-3 + ); + --utrecht-button-primary-action-color: var( --denhaag-color-white ); + --utrecht-button-primary-action-background-color: var( + --denhaag-color-green-3 + ); + --utrecht-button-padding-block-end: var( --denhaag-space-block-xs ); + --utrecht-button-padding-block-start: var( --denhaag-space-block-xs ); + --utrecht-button-padding-inline-end: var( --denhaag-space-inline-md ); + --utrecht-button-padding-inline-start: var( --denhaag-space-inline-md ); + --utrecht-button-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-button-color: var( --denhaag-color-white ); + --utrecht-button-border-radius: var( --denhaag-border-radius ); + --utrecht-button-border-color: var( --denhaag-color-green-3 ); + --utrecht-button-background-color: var( --denhaag-color-green-3 ); + --utrecht-breadcrumb-link-focus-color: var( --denhaag-color-blue-3 ); + --utrecht-breadcrumb-link-color: var( --denhaag-color-blue-4 ); + --utrecht-breadcrumb-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --utrecht-badge-font-size: var( --denhaag-typography-scale-s-font-size ); + --utrecht-badge-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-badge-border-radius: var( --denhaag-border-radius ); + --utrecht-badge-counter-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --utrecht-badge-counter-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-badge-counter-color: var( --denhaag-color-grey-4 ); + --utrecht-badge-counter-border-radius: var( --denhaag-border-radius ); + --utrecht-badge-counter-background-color: var( --denhaag-color-grey-1 ); + --of-color-border: var( --denhaag-color-grey-3 ); + --of-color-fg-muted: var( --denhaag-color-grey-4 ); + --of-color-fg: var( --denhaag-color-black ); + --of-color-bg: var( --denhaag-color-white ); + --of-color-danger: var( --denhaag-color-red-4 ); + --of-color-warning: var( --denhaag-color-orange-4 ); + --of-color-success: var( --denhaag-color-green-4 ); + --of-color-info: var( --denhaag-color-blue-4 ); + --of-color-secondary: var( --denhaag-color-grey-2 ); + --of-color-primary: var( --denhaag-color-green-3 ); + --of-page-header-bg: var( --denhaag-color-white ); + --of-page-footer-bg: var( --denhaag-color-grey-5 ); + --of-layout-bg: var( --denhaag-color-white ); + --of-layout-background: var( --denhaag-color-white ); + --of-helptext-bg: var( --denhaag-color-blue-1 ); + --of-field-border-color: var( --denhaag-color-grey-3 ); + --of-checkbox-bg: var( --denhaag-color-white ); + --of-button-primary-hover-color-border: var( --denhaag-color-ocher-5 ); + --of-button-primary-hover-bg: var( --denhaag-color-green-4 ); + --of-button-primary-active-color-border: var( --denhaag-color-ocher-5 ); + --of-button-primary-active-fg: var( --denhaag-color-white ); + --of-button-primary-active-bg: var( --denhaag-color-green-4 ); + --of-button-primary-fg: var( --denhaag-color-white ); + --of-button-primary-bg: var( --denhaag-color-green-3 ); + --of-alert-info-bg: var( --denhaag-color-blue-1 ); + --of-alert-warning-bg: var( --denhaag-color-orange-1 ); + --of-alert-error-bg: var( --denhaag-color-red-1 ); + --denhaag-focus-border: var( --denhaag-focus-border-width ) + var( --denhaag-focus-border-style ) var( --denhaag-focus-border-color ); + --denhaag-focus-border-color: var( --denhaag-color-ocher-5 ); + --denhaag-unordered-list-list-item-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-unordered-list-lead-margin-block-start: var( + --denhaag-space-block-2xl + ); + --denhaag-unordered-list-paragraph-margin-block-start: var( + --denhaag-space-block-md + ); + --denhaag-unordered-list-color: var( --denhaag-color-grey-4 ); + --denhaag-timeline-step-icon-text-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-timeline-step-content-color: var( --denhaag-color-grey-4 ); + --denhaag-timeline-step-label-disabled-color: var( --denhaag-color-grey-2 ); + --denhaag-timeline-step-label-active-color: var( --denhaag-color-blue-3 ); + --denhaag-timeline-step-label-completed-hover-color: var( + --denhaag-color-blue-3 + ); + --denhaag-timeline-step-icon-text-active-color: var( + --denhaag-color-white + ); + --denhaag-timeline-step-icon-disabled-color: var( --denhaag-color-grey-2 ); + --denhaag-timeline-step-icon-active-color: var( --denhaag-color-blue-3 ); + --denhaag-timeline-step-icon-completed-color: var( + --denhaag-color-green-3 + ); + --denhaag-timeline-step-icon-color: var( --denhaag-color-grey-3 ); + --denhaag-timeline-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-timeline-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-tabs-tab-indicator-border-color: var( --denhaag-color-green-3 ); + --denhaag-tabs-tab-focus-color: var( --denhaag-color-green-3 ); + --denhaag-tabs-tab-hover-color: var( --denhaag-color-green-3 ); + --denhaag-tabs-tab-selected-color: var( --denhaag-color-green-3 ); + --denhaag-tabs-tab-selected-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-tabs-tab-padding-inline-end: var( --denhaag-space-inline-md ); + --denhaag-tabs-tab-padding-inline-start: var( --denhaag-space-inline-md ); + --denhaag-tabs-tab-padding-block-end: var( --denhaag-space-block-xs ); + --denhaag-tabs-tab-padding-block-start: var( --denhaag-space-block-xs ); + --denhaag-tabs-tab-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-tabs-tab-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-tabs-tab-font-weight: var( --denhaag-typography-weight-regular ); + --denhaag-tabs-tab-color: var( --denhaag-color-grey-4 ); + --denhaag-tabs-tab-background-color: var( --denhaag-color-white ); + --denhaag-tabs-border-color: var( --denhaag-color-grey-2 ); + --denhaag-table-container-shadow-width: var( --denhaag-space-inline-5xl ); + --denhaag-table-heading-color: var( --denhaag-color-grey-5 ); + --denhaag-table-row-hover-background-color: var( + --denhaag-color-warmgrey-1 + ); + --denhaag-table-row-background-color: var( --denhaag-color-white ); + --denhaag-table-cell-sm-padding-inline-start: var( + --denhaag-space-block-xs + ); + --denhaag-table-cell-sm-padding-inline-end: var( --denhaag-space-block-xs ); + --denhaag-table-cell-sm-padding-block-start: var( + --denhaag-space-block-2xs + ); + --denhaag-table-cell-sm-padding-block-end: var( --denhaag-space-block-2xs ); + --denhaag-table-cell-outline-width: var( --denhaag-focus-border-width ); + --denhaag-table-cell-outline-style: var( --denhaag-focus-border-style ); + --denhaag-table-cell-gap: var( --denhaag-space-block-2xs ); + --denhaag-table-cell-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-table-cell-color: var( --denhaag-color-grey-4 ); + --denhaag-step-marker-connector-default-outline-color: var( + --denhaag-color-grey-2 + ); + --denhaag-step-marker-connector-error-outline-color: var( + --denhaag-color-red-3 + ); + --denhaag-step-marker-connector-warning-outline-color: var( + --denhaag-color-orange-4 + ); + --denhaag-step-marker-connector-checked-outline-color: var( + --denhaag-color-green-3 + ); + --denhaag-step-marker-connector-not-checked-outline-color: var( + --denhaag-color-grey-2 + ); + --denhaag-step-marker-error-color: var( --denhaag-color-white ); + --denhaag-step-marker-error-border-color: var( --denhaag-color-red-3 ); + --denhaag-step-marker-error-background-color: var( --denhaag-color-red-3 ); + --denhaag-step-marker-warning-nested-border-color: var( + --denhaag-color-orange-4 + ); + --denhaag-step-marker-warning-nested-background-color: var( + --denhaag-color-white + ); + --denhaag-step-marker-warning-color: var( --denhaag-color-white ); + --denhaag-step-marker-warning-border-color: var( --denhaag-color-orange-4 ); + --denhaag-step-marker-warning-background-color: var( + --denhaag-color-orange-4 + ); + --denhaag-step-marker-not-checked-color: var( --denhaag-color-grey-4 ); + --denhaag-step-marker-not-checked-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-step-marker-not-checked-background-color: var( + --denhaag-color-white + ); + --denhaag-step-marker-disabled-color: var( --denhaag-color-grey-4 ); + --denhaag-step-marker-disabled-border-color: var( --denhaag-color-grey-1 ); + --denhaag-step-marker-disabled-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-step-marker-default-nested-color: var( --denhaag-color-grey-2 ); + --denhaag-step-marker-default-color: var( --denhaag-color-white ); + --denhaag-step-marker-default-border-color: var( --denhaag-color-grey-2 ); + --denhaag-step-marker-default-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-step-marker-current-nested-color: var( --denhaag-color-green-3 ); + --denhaag-step-marker-current-color: var( --denhaag-color-white ); + --denhaag-step-marker-current-border-color: var( --denhaag-color-green-3 ); + --denhaag-step-marker-current-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-step-marker-checked-color: var( --denhaag-color-green-3 ); + --denhaag-step-marker-checked-border-color: var( --denhaag-color-green-3 ); + --denhaag-step-marker-checked-background-color: var( + --denhaag-color-white + ); + --denhaag-step-marker-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-step-marker-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-sidenav-link-active-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-sidenav-link-active-color: var( --denhaag-color-green-3 ); + --denhaag-sidenav-link-hover-color: var( --denhaag-color-green-3 ); + --denhaag-sidenav-link-color: var( --denhaag-color-grey-4 ); + --denhaag-sidenav-item-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-sidenav-item-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-sidenav-item-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-sheet-title-font-weight: var( --denhaag-typography-weight-bold ); + --denhaag-sheet-margin-block-start: var( + --denhaag-header-border-bottom-width + ); + --denhaag-sheet-background-color: var( --denhaag-color-white ); + --denhaag-radio-checked-inner-background-color: var( + --denhaag-color-white + ); + --denhaag-radio-border-width: var( --utrecht-custom-checkbox-border-width ); + --denhaag-radio-background-color: var( --denhaag-color-white ); + --denhaag-radio-size: var( --utrecht-custom-checkbox-size ); + --denhaag-process-steps-step-content-color: var( --denhaag-color-grey-4 ); + --denhaag-process-steps-step-heading-error-color: var( + --denhaag-color-red-3 + ); + --denhaag-process-steps-step-heading-warning-color: var( + --denhaag-color-orange-5 + ); + --denhaag-process-steps-step-heading-current-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-process-steps-step-heading-current-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-process-steps-step-heading-current-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-process-steps-step-heading-current-color: var( + --denhaag-color-green-3 + ); + --denhaag-process-steps-step-heading-checked-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-process-steps-step-heading-checked-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-process-steps-step-heading-checked-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-process-steps-step-heading-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-process-steps-step-heading-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-process-steps-step-heading-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-process-steps-step-heading-color: var( --denhaag-color-grey-4 ); + --denhaag-process-steps-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-process-steps-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-posttypelabel-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-posttypelabel-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-posttypelabel-color: var( --denhaag-color-blue-3 ); + --denhaag-pagination-link-current-disabled-color: var( + --denhaag-color-white + ); + --denhaag-pagination-link-current-disabled-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-pagination-link-current-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-pagination-link-current-color: var( --denhaag-color-green-3 ); + --denhaag-pagination-link-disabled-color: var( --denhaag-color-grey-2 ); + --denhaag-pagination-link-hover-color: var( --denhaag-color-green-3 ); + --denhaag-pagination-link-color: var( --denhaag-color-grey-4 ); + --denhaag-pagination-arrow-size: var( --denhaag-space-block-lg ); + --denhaag-pagination-arrow-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-pagination-size: var( --denhaag-space-block-2xl ); + --denhaag-pagination-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-pagination-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-pagination-border-radius: var( --denhaag-border-radius ); + --denhaag-page-header-background-color: var( --denhaag-color-white ); + --denhaag-page-buttons-outline-dark-action-disabled-color: var( + --denhaag-color-grey-2 + ); + --denhaag-page-buttons-outline-dark-action-disabled-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-page-buttons-outline-dark-action-disabled-background-color: var( + --denhaag-color-white + ); + --denhaag-page-buttons-outline-dark-action-hover-color: var( + --denhaag-color-green-3 + ); + --denhaag-page-buttons-outline-dark-action-hover-border-color: var( + --denhaag-color-green-3 + ); + --denhaag-page-buttons-outline-dark-action-hover-background-color: var( + --denhaag-color-white + ); + --denhaag-page-buttons-outline-dark-action-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-page-buttons-outline-dark-action-color: var( + --denhaag-color-grey-4 + ); + --denhaag-page-buttons-outline-dark-action-background-color: var( + --denhaag-color-white + ); + --denhaag-note-icon-end-margin-inline-end: var( + --denhaag-space-inline-2xs + ); + --denhaag-note-icon-spacing: var( --denhaag-space-block-xs ); + --denhaag-note-padding-block: var( --denhaag-space-block-2xs ); + --denhaag-note-icon-warning-color: var( --denhaag-color-white ); + --denhaag-note-icon-info-color: var( --denhaag-color-white ); + --denhaag-note-icon-color: var( --denhaag-color-grey-4 ); + --denhaag-note-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-note-color: var( --denhaag-color-grey-4 ); + --denhaag-modal-lg-inner-padding-inline: var( --denhaag-space-inline-2xl ); + --denhaag-modal-lg-inner-padding-block: var( --denhaag-space-block-2xl ); + --denhaag-modal-title-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-modal-title-font-family: var( + --denhaag-typography-sans-serif-alternate-font-family + ); + --denhaag-modal-title-color: var( --denhaag-color-blue-3 ); + --denhaag-modal-paragraph-color: var( --denhaag-color-grey-4 ); + --denhaag-modal-overlay-background-color: var( --denhaag-color-grey-2 ); + --denhaag-modal-icon-hover-color: var( --denhaag-color-grey-3 ); + --denhaag-modal-icon-color: var( --denhaag-color-grey-4 ); + --denhaag-modal-padding-inline: var( --denhaag-space-block-md ); + --denhaag-modal-padding-block: var( --denhaag-space-block-md ); + --denhaag-modal-gap: var( --denhaag-space-block-md ); + --denhaag-modal-background-color: var( --denhaag-color-white ); + --denhaag-mobile-menu-list-submenu-back-button-icon-color: var( + --denhaag-color-blue-3 + ); + --denhaag-mobile-menu-list-item-border-bottom: 1px solid + var( --denhaag-color-grey-1 ); + --denhaag-menu-button-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-menu-button-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-menu-button-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-menu-button-color: var( --denhaag-color-grey-4 ); + --denhaag-menu-button-active-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-menu-button-active-color: var( --denhaag-color-green-3 ); + --denhaag-list-subheader-color: var( --denhaag-color-grey-4 ); + --denhaag-list-subheader-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-list-item-text-secondary-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-list-item-text-secondary-color: var( --denhaag-color-grey-4 ); + --denhaag-list-item-text-primary-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-list-item-text-primary-color: var( --denhaag-color-grey-4 ); + --denhaag-list-item-icon-color: var( --denhaag-color-grey-4 ); + --denhaag-list-item-active-border-color: var( --denhaag-color-blue-3 ); + --denhaag-list-item-focus-color: var( --denhaag-color-blue-3 ); + --denhaag-list-item-hover-color: var( --denhaag-color-blue-3 ); + --denhaag-list-item-secondary-action-color: var( --denhaag-color-grey-4 ); + --denhaag-list-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-link-small-icon-font-size: var( --denhaag-space-block-xs ); + --denhaag-link-icon-gap: var( --denhaag-space-inline-2xs ); + --denhaag-link-icon-margin-end: var( --denhaag-space-inline-xs ); + --denhaag-link-icon-margin-start: var( --denhaag-space-inline-xs ); + --denhaag-link-disabled-color: var( --denhaag-color-grey-2 ); + --denhaag-link-hover-color: var( --denhaag-color-blue-4 ); + --denhaag-link-focus-color: var( --denhaag-color-blue-4 ); + --denhaag-link-color: var( --denhaag-color-blue-3 ); + --denhaag-link-group-link-icon-denhaag-icon-padding-block-start: var( + --denhaag-space-block-3xs + ); + --denhaag-link-group-dark-link-focus-outline-color: var( + --denhaag-color-ocher-2 + ); + --denhaag-link-group-dark-caption-color: var( --denhaag-color-ocher-3 ); + --denhaag-link-group-dark-link-color: var( --denhaag-color-white ); + --denhaag-link-group-list-item-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-link-group-list-item-padding-block: var( + --denhaag-space-block-xs + ); + --denhaag-link-group-list-margin-block-end: var( --denhaag-space-block-md ); + --denhaag-link-group-list-margin-block-start: var( + --denhaag-space-block-xs + ); + --denhaag-link-group-image-margin-block-end: var( + --denhaag-space-block-md + ); + --denhaag-language-switcher-list-item-link-active-color: var( + --denhaag-color-green-3 + ); + --denhaag-image-figcaption-text-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-image-figcaption-text-color: var( --denhaag-color-grey-4 ); + --denhaag-image-figcaption-download-hover-color: var( + --denhaag-color-blue-4 + ); + --denhaag-image-figcaption-download-color: var( --denhaag-color-blue-3 ); + --denhaag-image-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-icon-button-hover-color: var( --denhaag-color-green-3 ); + --denhaag-icon-button-focus-outline-style: var( + --denhaag-focus-border-style + ); + --denhaag-icon-button-focus-outline-width: var( + --denhaag-focus-border-width + ); + --denhaag-icon-button-color: var( --denhaag-color-grey-4 ); + --denhaag-highlighted-links-list-gap: 0 var( --denhaag-space-block-3xl ); + --denhaag-highlighted-links-padding-block-end: var( + --denhaag-space-block-3xl + ); + --denhaag-highlighted-links-padding-block-start: var( + --denhaag-space-block-3xl + ); + --denhaag-highlighted-links-background-color: var( + --denhaag-color-warmgrey-1 + ); + --denhaag-hero-theme-page-text-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --denhaag-hero-theme-page-text-padding-block-end: var( + --denhaag-space-block-2xl + ); + --denhaag-hero-theme-page-text-font-size-m: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-hero-theme-page-text-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-hero-theme-page-title-font-size-m: var( + --denhaag-typography-scale-3xl-font-size + ); + --denhaag-hero-theme-page-title-padding-block-end: var( + --denhaag-space-block-md + ); + --denhaag-hero-theme-page-content-padding-inline-end: var( + --denhaag-space-inline-md + ); + --denhaag-hero-theme-page-content-padding-inline-start: var( + --denhaag-space-inline-md + ); + --denhaag-hero-theme-page-content-padding-block-s: var( + --denhaag-space-block-3xl + ); + --denhaag-hero-theme-page-content-box-shadow: 0px 1px 0px + var( --denhaag-color-grey-2 ); + --denhaag-hero-theme-page-content-background-color: var( + --denhaag-color-white + ); + --denhaag-hero-routing-title-font-size-xs: var( + --denhaag-typography-scale-2xl-font-size + ); + --denhaag-hero-routing-content-padding-block-s: var( + --denhaag-space-block-3xl + ); + --denhaag-hero-routing-content-padding-block: var( + --denhaag-space-block-xl + ); + --denhaag-hero-routing-background-color: var( --denhaag-color-ocher-3 ); + --denhaag-hero-home-title-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-hero-home-title-font-size-xs: var( + --denhaag-typography-scale-2xl-font-size + ); + --denhaag-hero-home-title-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --denhaag-hero-home-title-color: var( --denhaag-color-white ); + --denhaag-hero-home-content-padding-block-s: var( + --denhaag-space-block-3xl + ); + --denhaag-hero-container-padding: var( --denhaag-space-inline-xl ); + --denhaag-hero-container-gutter-xl: var( --denhaag-space-inline-3xl ); + --denhaag-hero-container-gutter-l: var( --denhaag-space-inline-2xl ); + --denhaag-hero-container-gutter-m: var( --denhaag-space-inline-xl ); + --denhaag-hero-container-gutter-s: var( --denhaag-space-inline-md ); + --denhaag-hero-container-gutter: var( --denhaag-space-inline-xs ); + --denhaag-hero-color: var( --denhaag-color-black ); + --denhaag-hero-background-color: var( --denhaag-color-green-3 ); + --denhaag-heading-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --denhaag-heading-color: var( --denhaag-color-grey-5 ); + --denhaag-header-border-bottom-color: var( --denhaag-color-grey-1 ); + --denhaag-form-progress-progress-bar-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-form-progress-progress-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-form-progress-label-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-form-progress-label-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-form-progress-label-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-form-progress-label-color: var( --denhaag-color-grey-4 ); + --denhaag-form-input-icon-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-form-input-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-form-group-helper-text-error-color: var( --denhaag-color-red-3 ); + --denhaag-form-group-helper-text-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-form-group-helper-text-color: var( --denhaag-color-grey-4 ); + --denhaag-form-group-label-color: var( --denhaag-color-blue-5 ); + --denhaag-form-field-description-error-color: var( --denhaag-color-red-3 ); + --denhaag-form-field-description-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --denhaag-form-field-description-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-form-field-description-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-form-field-description-color: var( --denhaag-color-grey-4 ); + --denhaag-form-field-label-margin-block-end: var( + --denhaag-space-block-2xs + ); + --denhaag-footer-mega-color: var( --denhaag-color-white ); + --denhaag-footer-mega-background-color: var( --denhaag-color-grey-5 ); + --denhaag-footer-background-color: var( --denhaag-color-grey-4 ); + --denhaag-footer-color: var( --denhaag-color-white ); + --denhaag-floating-contact-status-online-border-color: var( + --denhaag-color-green-1 + ); + --denhaag-floating-contact-status-online-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-floating-contact-status-offline-border-color: var( + --denhaag-color-red-1 + ); + --denhaag-floating-contact-status-offline-background-color: var( + --denhaag-color-red-3 + ); + --denhaag-floating-contact-overlay-gap: var( --denhaag-space-inline-xl ); + --denhaag-floating-contact-overlay-padding-inline: var( + --denhaag-space-inline-xl + ); + --denhaag-floating-contact-overlay-padding-block: var( + --denhaag-space-block-2xl + ); + --denhaag-floating-contact-overlay-color: var( --denhaag-color-green-1 ); + --denhaag-floating-contact-overlay-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-floating-contact-overlay-arrow-width: var( + --denhaag-space-block-2xl + ); + --denhaag-floating-contact-switch-focus-icons-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-floating-contact-switch-hover-icons-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-floating-contact-switch-icons-color: var( --denhaag-color-white ); + --denhaag-floating-contact-switch-icons-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-floating-contact-switch-padding-inline: var( + --denhaag-space-inline-md + ); + --denhaag-floating-contact-switch-padding-block: var( + --denhaag-space-block-md + ); + --denhaag-floating-contact-switch-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-floating-contact-switch-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-floating-contact-switch-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-floating-contact-switch-border-color: var( + --denhaag-color-green-2 + ); + --denhaag-floating-contact-switch-background-color: var( + --denhaag-color-green-1 + ); + --denhaag-floating-contact-link-hover-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-floating-contact-link-outline-width: var( + --denhaag-focus-border-width + ); + --denhaag-floating-contact-link-outline-style: var( + --denhaag-focus-border-style + ); + --denhaag-floating-contact-link-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-floating-contact-link-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-floating-contact-link-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-floating-contact-link-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-floating-contact-link-color: var( --denhaag-color-white ); + --denhaag-floating-contact-item-gap: var( --denhaag-space-inline-lg ); + --denhaag-floating-contact-heading-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-floating-contact-heading-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-floating-contact-heading-font-size: var( + --denhaag-typography-scale-2xl-font-size + ); + --denhaag-floating-contact-heading-font-family: var( + --denhaag-typography-sans-serif-alternate-font-family + ); + --denhaag-floating-contact-right: var( --denhaag-space-inline-md ); + --denhaag-floating-contact-color: var( --denhaag-color-green-5 ); + --denhaag-floating-contact-bottom: var( --denhaag-space-block-md ); + --denhaag-file-link-gap: var( --denhaag-space-inline-2xs ); + --denhaag-file-link-color: var( --denhaag-color-blue-3 ); + --denhaag-file-right-padding-inline-end: var( --denhaag-space-inline-sm ); + --denhaag-file-right-padding-inline-start: var( --denhaag-space-inline-sm ); + --denhaag-file-right-padding-block-end: var( --denhaag-space-block-sm ); + --denhaag-file-right-padding-block-start: var( --denhaag-space-block-sm ); + --denhaag-file-right-gap: var( --denhaag-space-inline-xs ); + --denhaag-file-left-background-color: var( --denhaag-color-warmgrey-1 ); + --denhaag-file-left-padding-inline-end: var( --denhaag-space-inline-sm ); + --denhaag-file-left-padding-inline-start: var( --denhaag-space-inline-sm ); + --denhaag-file-focus-outline-style: var( --denhaag-focus-border-style ); + --denhaag-file-focus-outline-width: var( --denhaag-focus-border-width ); + --denhaag-file-hover-color: var( --denhaag-color-blue-4 ); + --denhaag-file-border-color: var( --denhaag-color-grey-2 ); + --denhaag-event-date-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-dynamic-content-m-grid-gap: var( --denhaag-space-inline-xl ); + --denhaag-dynamic-content-s-grid-gap: var( --denhaag-space-inline-md ); + --denhaag-dynamic-content-pagination-padding-block: var( + --denhaag-space-block-5xl + ); + --denhaag-dynamic-content-row-gap: var( --denhaag-space-block-2xl ); + --denhaag-dynamic-content-grid-gap: var( --denhaag-space-inline-md ); + --denhaag-dynamic-content-list-gap: var( --denhaag-space-inline-md ); + --denhaag-dynamic-content-image-placeholder-padding-inline: var( + --denhaag-space-inline-xl + ); + --denhaag-dynamic-content-image-placeholder-padding-block: var( + --denhaag-space-block-xl + ); + --denhaag-dynamic-content-image-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-dynamic-content-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-dynamic-content-padding-block: var( --denhaag-space-inline-2xl ); + --denhaag-dynamic-content-card-title-line-height: var( + --denhaag-typography-scale-s-line-height + ); + --denhaag-dynamic-content-card-title-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-dynamic-content-card-title-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-dynamic-content-card-title-color: var( --denhaag-color-grey-5 ); + --denhaag-dynamic-content-card-caption-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-dynamic-content-card-caption-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-dynamic-content-card-caption-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-dynamic-content-card-gap: var( --denhaag-space-block-md ); + --denhaag-dynamic-content-card-content-padding: var( + --denhaag-space-block-md + ); + --denhaag-dynamic-content-card-content-gap: var( + --denhaag-space-inline-lg + ); + --denhaag-dynamic-content-card-content-color: var( --denhaag-color-grey-4 ); + --denhaag-dot-indicator-border: var( --denhaag-dot-indicator-border-size ) + solid var( --denhaag-dot-indicator-border-color ); + --denhaag-dot-indicator-border-color: var( --denhaag-color-white ); + --denhaag-dot-indicator-background-color: var( --denhaag-color-red-3 ); + --denhaag-divider-border-color: var( --denhaag-color-grey-2 ); + --denhaag-description-list-lg-title-padding-block-start: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-lg-title-padding-block-end: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-lg-detail-padding-block-start: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-lg-detail-padding-block-end: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-lg-padding-inline-start: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-lg-padding-inline-end: var( + --denhaag-space-inline-md + ); + --denhaag-description-list-title-padding-block-end: var( + --denhaag-space-inline-2xs + ); + --denhaag-description-list-title-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-description-list-title-color: var( --denhaag-color-grey-5 ); + --denhaag-description-list-detail-padding-block-start: var( + --denhaag-space-inline-2xs + ); + --denhaag-description-list-caption-margin-block-end: var( + --denhaag-space-inline-xl + ); + --denhaag-description-list-caption-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-description-list-caption-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-description-list-caption-font-family: var( + --denhaag-typography-sans-serif-alternate-font-family + ); + --denhaag-description-list-caption-color: var( --denhaag-color-black ); + --denhaag-description-list-padding-inline-start: var( + --denhaag-space-inline-xs + ); + --denhaag-description-list-padding-inline-end: var( + --denhaag-space-inline-xs + ); + --denhaag-description-list-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-description-list-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-description-list-color: var( --denhaag-color-grey-4 ); + --denhaag-description-list-border-color: var( --denhaag-color-grey-2 ); + --denhaag-datepicker-error-input-border-color: var( --denhaag-color-red-3 ); + --denhaag-datepicker-error-icon-color: var( --denhaag-color-red-3 ); + --denhaag-datepicker-disabled-button-color: var( --denhaag-color-grey-2 ); + --denhaag-datepicker-disabled-input-color: var( --denhaag-color-grey-2 ); + --denhaag-datepicker-disabled-input-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-datepicker-calendar-day-selected-hover-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-datepicker-calendar-day-selected-color: var( + --denhaag-color-white + ); + --denhaag-datepicker-calendar-day-selected-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-datepicker-calendar-day-hover-color: var( + --denhaag-color-green-3 + ); + --denhaag-datepicker-calendar-day-current-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-datepicker-calendar-day-color: var( --denhaag-color-grey-4 ); + --denhaag-datepicker-calendar-heading-color: var( --denhaag-color-grey-3 ); + --denhaag-datepicker-calendar-background-color: var( + --denhaag-color-white + ); + --denhaag-datepicker-calendar-border-color: var( --denhaag-color-grey-2 ); + --denhaag-datepicker-button-color: var( --denhaag-color-grey-4 ); + --denhaag-datepicker-input-hover-border-color: var( + --denhaag-color-blue-3 + ); + --denhaag-datepicker-input-placeholder-color: var( --denhaag-color-grey-3 ); + --denhaag-datepicker-input-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-datepicker-input-color: var( --denhaag-color-grey-4 ); + --denhaag-datepicker-input-background-color: var( --denhaag-color-white ); + --denhaag-datepicker-input-border-color: var( --denhaag-color-grey-3 ); + --denhaag-datepicker-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-cta-link-icon-size: var( --denhaag-space-block-lg ); + --denhaag-cta-link-dot-color: var( --denhaag-color-white ); + --denhaag-cta-link-hover-highlight-color: var( --denhaag-color-blue-4 ); + --denhaag-cta-link-focus-highlight-color: var( --denhaag-color-blue-4 ); + --denhaag-cta-link-width: var( --denhaag-space-block-5xl ); + --denhaag-cta-link-highlight-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-cta-link-highlight-color: var( --denhaag-color-blue-3 ); + --denhaag-cta-link-padding-inline: var( --denhaag-space-inline-md ); + --denhaag-cta-link-padding-block: var( --denhaag-space-block-xl ); + --denhaag-cta-link-gap: var( --denhaag-space-block-lg ); + --denhaag-cta-link-font-weight: var( --denhaag-typography-weight-regular ); + --denhaag-cta-link-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-cta-link-color: var( --denhaag-color-grey-5 ); + --denhaag-cta-link-border-color: var( --denhaag-color-grey-2 ); + --denhaag-cta-image-content-button-margin-block-start: var( + --denhaag-space-block-xl + ); + --denhaag-cta-image-content-text-small-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-cta-image-content-text-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-cta-image-content-title-small-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-cta-image-content-content-width: calc( + 50% - ( 2 * var( --denhaag-space-inline-2xl ) ) + ); + --denhaag-cta-image-content-content-padding-block: var( + --denhaag-space-block-2xl + ); + --denhaag-cta-image-content-content-padding-inline: var( + --denhaag-space-inline-2xl + ); + --denhaag-cta-image-content-filled-background-color: var( + --denhaag-color-warmgrey-1 + ); + --denhaag-cta-image-content-border: 1px solid var( --denhaag-color-grey-2 ); + --denhaag-cta-image-content-background-color: var( --denhaag-color-white ); + --denhaag-cta-event-title-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-cta-event-title-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-cta-event-title-color: var( --denhaag-color-grey-5 ); + --denhaag-cta-event-excerpt-gap: var( --denhaag-space-block-2xs ); + --denhaag-cta-event-day-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-cta-event-date-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-cta-event-date-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-cta-event-date-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-cta-event-date-color: var( --denhaag-color-white ); + --denhaag-cta-event-dot-background-color: var( --denhaag-color-blue-3 ); + --denhaag-cta-event-hover-dot-background-color: var( + --denhaag-color-blue-4 + ); + --denhaag-cta-event-focus-dot-background-color: var( + --denhaag-color-blue-4 + ); + --denhaag-cta-event-width: var( --denhaag-space-block-5xl ); + --denhaag-cta-event-padding-inline: var( --denhaag-space-inline-md ); + --denhaag-cta-event-padding-block: var( --denhaag-space-block-xl ); + --denhaag-cta-event-gap: var( --denhaag-space-block-lg ); + --denhaag-cta-event-font-weight: var( --denhaag-typography-weight-regular ); + --denhaag-cta-event-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-cta-event-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-cta-event-color: var( --denhaag-color-grey-4 ); + --denhaag-cta-event-border-color: var( --denhaag-color-grey-2 ); + --denhaag-cta-download-title-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-cta-download-title-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-cta-download-title-color: var( --denhaag-color-grey-5 ); + --denhaag-cta-download-excerpt-gap: var( --denhaag-space-block-2xs ); + --denhaag-cta-download-dot-color: var( --denhaag-color-white ); + --denhaag-cta-download-dot-background-color: var( --denhaag-color-blue-3 ); + --denhaag-cta-download-hover-dot-background-color: var( + --denhaag-color-blue-4 + ); + --denhaag-cta-download-focus-dot-background-color: var( + --denhaag-color-blue-4 + ); + --denhaag-cta-download-width: var( --denhaag-space-block-5xl ); + --denhaag-cta-download-padding-inline: var( --denhaag-space-inline-md ); + --denhaag-cta-download-padding-block: var( --denhaag-space-block-xl ); + --denhaag-cta-download-gap: var( --denhaag-space-block-lg ); + --denhaag-cta-download-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-cta-download-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-cta-download-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-cta-download-color: var( --denhaag-color-grey-4 ); + --denhaag-cta-download-border-color: var( --denhaag-color-grey-2 ); + --denhaag-contact-timeline-mobile-meta-marker-color: var( + --denhaag-color-black + ); + --denhaag-checkbox-hover-invalid-border-color: var( --denhaag-color-red-4 ); + --denhaag-checkbox-hover-invalid-background-color: var( + --denhaag-color-red-4 + ); + --denhaag-checkbox-hover-checked-border-color: var( + --denhaag-color-green-4 + ); + --denhaag-checkbox-hover-checked-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-checkbox-hover-border-color: var( --denhaag-color-grey-4 ); + --denhaag-checkbox-checked-disabled-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-checkbox-checked-disabled-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-checkbox-checked-invalid-background-color: var( + --denhaag-color-red-3 + ); + --denhaag-card-title-padding-inline: var( --denhaag-card-title-padding ); + --denhaag-card-title-padding-block: var( --denhaag-card-title-padding ); + --denhaag-card-title-font-weight: var( --denhaag-typography-weight-bold ); + --denhaag-card-title-font-size: var( + --denhaag-typography-scale-xl-font-size + ); + --denhaag-card-title-font-color: var( --denhaag-color-black ); + --denhaag-card-subtitle-padding-inline: var( + --denhaag-card-subtitle-padding + ); + --denhaag-card-subtitle-padding-block: var( + --denhaag-card-subtitle-padding + ); + --denhaag-card-subtitle-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-card-subtitle-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-card-subtitle-font-color: var( --denhaag-color-grey-4 ); + --denhaag-card-wrapper-padding-inline: var( + --denhaag-card-wrapper-padding + ); + --denhaag-card-wrapper-padding-block: var( --denhaag-card-wrapper-padding ); + --denhaag-card-case-archived-secondary-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-card-case-archived-primary-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-card-case-archived-arrow-active-color: var( + --denhaag-color-grey-5 + ); + --denhaag-card-case-archived-arrow-color: var( --denhaag-color-grey-4 ); + --denhaag-card-case-archived-title-color: var( --denhaag-color-grey-5 ); + --denhaag-card-case-archived-color: var( --denhaag-color-grey-4 ); + --denhaag-card-case-secondary-background-color: var( + --denhaag-color-blue-2 + ); + --denhaag-card-case-primary-background-color: var( --denhaag-color-blue-1 ); + --denhaag-card-case-arrow-active-color: var( --denhaag-color-blue-4 ); + --denhaag-card-case-arrow-color: var( --denhaag-color-blue-3 ); + --denhaag-card-case-title-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-card-case-title-color: var( --denhaag-color-blue-5 ); + --denhaag-card-case-color: var( --denhaag-color-blue-4 ); + --denhaag-card-arrow-color: var( --denhaag-color-black ); + --denhaag-card-case-paper-color: var( --denhaag-color-white ); + --denhaag-card-background-color: var( --denhaag-color-white ); + --denhaag-card-border-color: var( --denhaag-color-grey-2 ); + --denhaag-card-news-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-card-news-icon-height: var( --denhaag-space-block-md ); + --denhaag-card-news-text-margin-block-end: var( --denhaag-space-block-xs ); + --denhaag-card-news-padding: var( --denhaag-space-block-md ); + --denhaag-card-news-gap: var( --denhaag-space-block-md ); + --denhaag-card-news-box-shadow: 0 0 0.5rem var( --denhaag-color-grey-2 ); + --denhaag-card-news-border: 1px solid var( --denhaag-color-grey-2 ); + --denhaag-card-group-margin-block: var( --denhaag-space-block-lg ); + --denhaag-card-authentication-title-color: [object Object]; + --denhaag-card-authentication-title-font-family: [object Object]; + --denhaag-card-authentication-border-color: var( --denhaag-color-grey-2 ); + --denhaag-card-authentication-background-color: var( + --denhaag-color-white + ); + --denhaag-button-icon-only-icon-height: var( --denhaag-space-block-lg ); + --denhaag-button-large-size-padding-inline: var( + --denhaag-space-inline-lg + ); + --denhaag-button-secondary-action-disabled-color: var( + --denhaag-color-grey-2 + ); + --denhaag-button-secondary-action-disabled-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-button-secondary-action-disabled-background-color: var( + --denhaag-color-white + ); + --denhaag-button-secondary-action-hover-color: var( + --denhaag-color-green-4 + ); + --denhaag-button-secondary-action-hover-border-color: var( + --denhaag-color-green-4 + ); + --denhaag-button-secondary-action-hover-background-color: var( + --denhaag-color-white + ); + --denhaag-button-secondary-action-border-color: var( + --denhaag-color-green-3 + ); + --denhaag-button-secondary-action-color: var( --denhaag-color-green-3 ); + --denhaag-button-secondary-action-background-color: var( + --denhaag-color-white + ); + --denhaag-button-primary-action-disabled-color: var( + --denhaag-color-white + ); + --denhaag-button-primary-action-disabled-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-button-primary-action-hover-color: var( --denhaag-color-white ); + --denhaag-button-primary-action-hover-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-button-primary-action-color: var( --denhaag-color-white ); + --denhaag-button-primary-action-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-button-focus-border-style: var( --denhaag-focus-border-style ); + --denhaag-button-focus-border-width: var( --denhaag-focus-border-width ); + --denhaag-button-padding-inline: var( --denhaag-space-inline-md ); + --denhaag-button-padding-block: var( --denhaag-space-block-xs ); + --denhaag-button-font-weight: var( --denhaag-typography-weight-regular ); + --denhaag-button-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-button-border-radius: var( --denhaag-border-radius ); + --denhaag-button-group-gap: var( --denhaag-space-block-md ); + --denhaag-button-group-padding: var( --denhaag-space-block-md ); + --denhaag-breadcrumb-link-hover-color: var( --denhaag-color-blue-4 ); + --denhaag-breadcrumb-link-focus-color: var( --denhaag-color-blue-4 ); + --denhaag-breadcrumb-link-color: var( --denhaag-color-blue-3 ); + --denhaag-breadcrumb-dots-hover-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-breadcrumb-dots-color: var( --denhaag-color-grey-3 ); + --denhaag-breadcrumb-dots-border-radius: var( --denhaag-border-radius ); + --denhaag-breadcrumb-dots-background-color: var( --denhaag-color-grey-1 ); + --denhaag-breadcrumb-current-color: var( --denhaag-color-grey-4 ); + --denhaag-breadcrumb-spacing: var( --denhaag-space-inline-xs ); + --denhaag-breadcrumb-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-breadcrumb-color: var( --denhaag-color-grey-4 ); + --denhaag-breadcrumb-background-color: var( --denhaag-color-warmgrey-1 ); + --denhaag-blockquote-paragraph-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-blockquote-paragraph-font-family: var( + --denhaag-typography-sans-serif-alternate-font-family + ); + --denhaag-blockquote-paragraph-color: var( --denhaag-color-green-4 ); + --denhaag-blockquote-border-color: var( --denhaag-color-green-1 ); + --denhaag-blockquote-attribution-font-size: var( + --denhaag-typography-scale-s-font-size + ); + --denhaag-blockquote-attribution-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-blockquote-attribution-color: var( --denhaag-color-grey-4 ); + --denhaag-article-meta-horizontal-item-border-color: var( + --denhaag-color-grey-2 + ); + --denhaag-article-meta-margin-block-start: var( --denhaag-space-block-2xl ); + --denhaag-article-meta-padding-block-end: var( --denhaag-space-block-5xl ); + --denhaag-article-meta-padding-block-start: var( --denhaag-space-block-md ); + --denhaag-article-meta-line-height: var( + --denhaag-typography-scale-base-line-height + ); + --denhaag-article-meta-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-article-meta-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-article-meta-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-article-meta-color: var( --denhaag-color-grey-4 ); + --denhaag-article-meta-border-color: var( --denhaag-color-grey-2 ); + --denhaag-anchor-navigation-link-target-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-navigation-link-hover-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-navigation-link-focus-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-navigation-link-active-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-anchor-navigation-link-active-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-navigation-link-padding-block: var( + --denhaag-space-block-xs + ); + --denhaag-anchor-navigation-link-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-anchor-navigation-link-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-anchor-navigation-link-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --denhaag-anchor-navigation-link-color: var( --denhaag-color-grey-4 ); + --denhaag-anchor-navigation-link-background-color: var( + --denhaag-color-grey-2 + ); + --denhaag-anchor-navigation-button-margin-block-start: var( + --denhaag-space-block-md + ); + --denhaag-anchor-collapse-summary-focus-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-collapse-summary-hover-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-collapse-summary-active-color: var( + --denhaag-color-green-3 + ); + --denhaag-anchor-collapse-summary-padding-inline: var( + --denhaag-space-inline-xl + ); + --denhaag-anchor-collapse-summary-padding-block: var( + --denhaag-space-block-md + ); + --denhaag-anchor-collapse-summary-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-anchor-collapse-summary-font-size: var( + --denhaag-typography-scale-lg-font-size + ); + --denhaag-anchor-collapse-summary-font-family: [object Object]; + --denhaag-anchor-collapse-summary-color: var( --denhaag-color-grey-5 ); + --denhaag-anchor-collapse-content-padding-inline-end: var( + --denhaag-space-inline-xl + ); + --denhaag-anchor-collapse-content-padding-inline-start: var( + --denhaag-space-inline-xl + ); + --denhaag-anchor-collapse-content-padding-block-end: var( + --denhaag-space-block-xl + ); + --denhaag-anchor-collapse-content-padding-block-start: var( + --denhaag-space-block-md + ); + --denhaag-anchor-collapse-content-margin-block-start: var( + --denhaag-space-block-xs + ); + --denhaag-anchor-collapse-border-color: var( --denhaag-color-grey-2 ); + --denhaag-alert-warning-close-icon-color: var( --denhaag-color-orange-5 ); + --denhaag-alert-warning-action-button-hover-background-color: var( + --denhaag-color-orange-5 + ); + --denhaag-alert-warning-action-button-background-color: var( + --denhaag-color-orange-5 + ); + --denhaag-alert-warning-action-button-color: var( --denhaag-color-white ); + --denhaag-alert-warning-icon-color: var( --denhaag-color-orange-5 ); + --denhaag-alert-warning-paragraph-color: var( --denhaag-color-orange-5 ); + --denhaag-alert-warning-title-color: var( --denhaag-color-orange-5 ); + --denhaag-alert-warning-background-color: var( --denhaag-color-orange-1 ); + --denhaag-alert-success-close-icon-color: var( --denhaag-color-green-5 ); + --denhaag-alert-success-action-button-hover-background-color: var( + --denhaag-color-green-4 + ); + --denhaag-alert-success-action-button-background-color: var( + --denhaag-color-green-3 + ); + --denhaag-alert-success-action-button-color: var( --denhaag-color-white ); + --denhaag-alert-success-icon-color: var( --denhaag-color-green-3 ); + --denhaag-alert-success-paragraph-color: var( --denhaag-color-green-5 ); + --denhaag-alert-success-title-color: var( --denhaag-color-green-5 ); + --denhaag-alert-success-background-color: var( --denhaag-color-green-1 ); + --denhaag-alert-info-close-icon-color: var( --denhaag-color-blue-5 ); + --denhaag-alert-info-action-button-hover-background-color: var( + --denhaag-color-blue-4 + ); + --denhaag-alert-info-action-button-background-color: var( + --denhaag-color-blue-3 + ); + --denhaag-alert-info-action-button-color: var( --denhaag-color-white ); + --denhaag-alert-info-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-alert-info-paragraph-color: var( --denhaag-color-blue-5 ); + --denhaag-alert-info-title-color: var( --denhaag-color-blue-5 ); + --denhaag-alert-info-background-color: var( --denhaag-color-blue-1 ); + --denhaag-alert-error-close-icon-color: var( --denhaag-color-red-5 ); + --denhaag-alert-error-action-button-hover-background-color: var( + --denhaag-color-red-4 + ); + --denhaag-alert-error-action-button-background-color: var( + --denhaag-color-red-3 + ); + --denhaag-alert-error-action-button-color: var( --denhaag-color-white ); + --denhaag-alert-error-icon-color: var( --denhaag-color-red-3 ); + --denhaag-alert-error-paragraph-color: var( --denhaag-color-red-5 ); + --denhaag-alert-error-title-color: var( --denhaag-color-red-5 ); + --denhaag-alert-error-background-color: var( --denhaag-color-red-1 ); + --denhaag-alert-action-padding-block-start: var( --denhaag-space-block-md ); + --denhaag-alert-content-margin-inline-end: var( --denhaag-space-block-xl ); + --denhaag-alert-content-margin-inline-start: var( + --denhaag-space-block-xl + ); + --denhaag-alert-padding-inline-end: var( --denhaag-space-block-xl ); + --denhaag-alert-padding-inline-start: var( --denhaag-space-block-xl ); + --denhaag-alert-padding-block-end: var( --denhaag-space-block-xl ); + --denhaag-alert-padding-block-start: var( --denhaag-space-block-xl ); + --denhaag-action-lg-padding-block-end: var( --denhaag-space-block-sm ); + --denhaag-action-lg-padding-block-start: var( --denhaag-space-block-sm ); + --denhaag-action-lg-gap: var( --denhaag-space-inline-xl ); + --denhaag-action-single-details-lg-gap: var( --denhaag-space-inline-sm ); + --denhaag-action-single-details-gap: var( --denhaag-space-inline-xs ); + --denhaag-action-single-focus-outline-style: var( + --denhaag-focus-border-style + ); + --denhaag-action-single-focus-outline-width: var( + --denhaag-focus-border-width + ); + --denhaag-action-single-hover-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-action-single-padding-block-end: var( --denhaag-space-block-md ); + --denhaag-action-single-padding-block-start: var( + --denhaag-space-block-md + ); + --denhaag-action-single-padding-inline-end: var( + --denhaag-space-inline-md + ); + --denhaag-action-single-padding-inline-start: var( + --denhaag-space-inline-md + ); + --denhaag-action-warning-icon-color: var( --denhaag-color-orange-4 ); + --denhaag-action-link-icon-color: var( --denhaag-color-blue-3 ); + --denhaag-action-actions-gap: var( --denhaag-space-inline-xs ); + --denhaag-action-date-warning-font-weight: var( + --denhaag-typography-weight-semibold + ); + --denhaag-action-date-warning-color: var( --denhaag-color-orange-5 ); + --denhaag-action-date-warning-gap: var( --denhaag-space-inline-xs ); + --denhaag-action-date-font-weight: var( + --denhaag-typography-weight-medium + ); + --denhaag-action-date-color: var( --denhaag-color-grey-4 ); + --denhaag-action-details-lg-gap: var( --denhaag-space-inline-xl ); + --denhaag-action-details-gap: var( --denhaag-space-inline-md ); + --denhaag-action-title-font-weight: var( + --denhaag-typography-weight-semibold + ); + --denhaag-action-border-color: var( --denhaag-color-grey-2 ); + --denhaag-action-padding-block-end: var( --denhaag-space-block-md ); + --denhaag-action-padding-block-start: var( --denhaag-space-block-md ); + --denhaag-action-padding-inline-end: var( --denhaag-space-inline-md ); + --denhaag-action-padding-inline-start: var( --denhaag-space-inline-md ); + --denhaag-action-background-color: var( --denhaag-color-white ); + --denhaag-action-color: var( --denhaag-color-grey-5 ); + --denhaag-action-gap: var( --denhaag-space-inline-xs ); + --denhaag-accordion-details-padding-inline: var( + --denhaag-space-inline-md + ); + --denhaag-accordion-details-padding-block-end: var( + --denhaag-space-block-md + ); + --denhaag-accordion-icon-width: var( --denhaag-space-inline-xl ); + --denhaag-accordion-icon-right: var( --denhaag-space-inline-md ); + --denhaag-accordion-icon-color: var( --denhaag-color-grey-4 ); + --denhaag-accordion-title-disabled-background-color: var( + --denhaag-color-grey-1 + ); + --denhaag-accordion-title-focus-outline: 2px dashed + var( --denhaag-color-ocher-5 ); + --denhaag-accordion-title-focus-border-radius: var( + --denhaag-border-radius + ); + --denhaag-accordion-title-padding-inline: var( --denhaag-space-inline-md ); + --denhaag-accordion-panel-font-weight: var( + --denhaag-typography-weight-regular + ); + --denhaag-accordion-panel-font-size: var( + --denhaag-typography-scale-base-font-size + ); + --denhaag-accordion-panel-color: var( --denhaag-color-green-3 ); + --denhaag-accordion-container-open-panel-font-weight: var( + --denhaag-typography-weight-bold + ); + --denhaag-accordion-container-open-panel-color: var( + --denhaag-color-green-3 + ); + --denhaag-accordion-container-open-icon-color: var( + --denhaag-color-green-3 + ); + --denhaag-accordion-container-open-title-color: var( + --denhaag-color-green-3 + ); + --denhaag-accordion-container-open-color: var( --denhaag-color-green-4 ); + --denhaag-accordion-container-border-radius: var( --denhaag-border-radius ); + --denhaag-accordion-container-border: 1px solid + var( --denhaag-color-grey-3 ); + --denhaag-accordion-font-family: var( + --denhaag-typography-sans-serif-font-family + ); + --utrecht-focus-outline-color: var( --denhaag-focus-border-color ); + --utrecht-focus-border-color: var( --denhaag-focus-border-color ); + --utrecht-heading-color: var( --denhaag-heading-color ); + --utrecht-form-toggle-focus-border-color: var( + --denhaag-focus-border-color + ); + --utrecht-form-field-description-font-family: var( + --utrecht-document-font-family + ); + --utrecht-form-control-font-family: var( --utrecht-document-font-family ); + --utrecht-button-focus-border-color: var( --denhaag-focus-border-color ); + --of-link-color: var( --denhaag-link-color ); + --of-button-anchor-fg: var( --denhaag-link-color ); + --denhaag-timeline-step-outline: var( --denhaag-focus-border ); + --denhaag-table-cell-outline-color: var( --denhaag-focus-border-color ); + --denhaag-radio-hover-invalid-border-color: var( + --denhaag-checkbox-hover-invalid-border-color + ); + --denhaag-radio-hover-invalid-background-color: var( + --denhaag-checkbox-hover-invalid-background-color + ); + --denhaag-radio-hover-checked-border-color: var( + --denhaag-checkbox-hover-checked-border-color + ); + --denhaag-radio-hover-checked-background-color: var( + --denhaag-checkbox-hover-checked-background-color + ); + --denhaag-radio-hover-border-color: var( + --denhaag-checkbox-hover-border-color + ); + --denhaag-radio-disabled-border-color: var( + --utrecht-custom-checkbox-disabled-border-color + ); + --denhaag-radio-disabled-background-color: var( + --utrecht-custom-checkbox-disabled-background-color + ); + --denhaag-radio-invalid-border-color: var( + --utrecht-custom-checkbox-invalid-border-color + ); + --denhaag-radio-checked-disabled-border-color: var( + --denhaag-checkbox-checked-disabled-border-color + ); + --denhaag-radio-checked-disabled-background-color: var( + --denhaag-checkbox-checked-disabled-background-color + ); + --denhaag-radio-checked-invalid-background-color: var( + --denhaag-checkbox-checked-invalid-background-color + ); + --denhaag-radio-checked-border-color: var( + --utrecht-custom-checkbox-checked-border-color + ); + --denhaag-radio-checked-background-color: var( + --utrecht-custom-checkbox-checked-background-color + ); + --denhaag-radio-border-color: var( --utrecht-custom-checkbox-border-color ); + --denhaag-process-steps-step-outline: var( --denhaag-focus-border ); + --denhaag-menu-button-chevron-active-color: var( + --denhaag-menu-button-active-color + ); + --denhaag-menu-button-hover-color: var( + --denhaag-menu-button-active-color + ); + --denhaag-link-focus-outline: var( --denhaag-focus-border ); + --denhaag-language-switcher-list-item-link-active-font-weight: var( + --utrecht-heading-font-weight + ); + --denhaag-image-figcaption-download-outline: var( --denhaag-focus-border ); + --denhaag-icon-button-focus-outline-color: var( + --denhaag-focus-border-color + ); + --denhaag-form-field-description-font-family: var( + --utrecht-document-font-family + ); + --denhaag-floating-contact-switch-outline: var( --denhaag-focus-border ); + --denhaag-file-focus-outline-color: var( --denhaag-focus-border-color ); + --denhaag-dynamic-content-focus-outline: var( --denhaag-focus-border ); + --denhaag-cta-link-focus-outline: var( --denhaag-focus-border ); + --denhaag-cta-event-focus-outline: var( --denhaag-focus-border ); + --denhaag-cta-download-focus-outline: var( --denhaag-focus-border ); + --denhaag-card-authentication-title-font-weight: var( + --utrecht-heading-font-weight + ); + --denhaag-card-authentication-title-font-size: var( + --utrecht-heading-3-font-size + ); + --denhaag-button-medium-size-padding-inline: var( + --denhaag-button-padding-inline + ); + --denhaag-button-medium-size-padding-block: var( + --denhaag-button-padding-block + ); + --denhaag-button-focus-border-color: var( --denhaag-focus-border-color ); + --denhaag-breadcrumb-link-focus-outline: var( --denhaag-focus-border ); + --denhaag-anchor-navigation-link-outline: var( --denhaag-focus-border ); + --denhaag-anchor-collapse-summary-focus-outline: var( + --denhaag-focus-border + ); + --denhaag-action-single-focus-outline-color: var( + --denhaag-focus-border-color + ); + --denhaag-menu-button-chevron-hover-color: var( + --denhaag-menu-button-chevron-active-color + ); + --denhaag-card-news-outline: var( --denhaag-link-focus-outline ); +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_bootstrap.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_bootstrap.scss index 4ac575fc..6dd83478 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_bootstrap.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_bootstrap.scss @@ -48,6 +48,7 @@ $btn-border-style: solid !default; Links --------------------------------------------------------------*/ $link-color: #0639a9 !default; +$link-decoration: underline !default; /*-------------------------------------------------------------- Tables @@ -70,7 +71,6 @@ $box-shadow: /*-------------------------------------------------------------- Pagination --------------------------------------------------------------*/ - $pagination-padding-y: 0.8rem !default; $pagination-padding-x: 1.2rem !default; $pagination-color: theme-color( 'secondary' ) !default; @@ -85,3 +85,19 @@ $pagination-focus-box-shadow: 0 0 0 0.2rem --------------------------------------------------------------*/ $input-padding-y: 0.4rem !default; $input-padding-x: 0.7rem !default; + +/*-------------------------------------------------------------- + Dropdown +--------------------------------------------------------------*/ +$dropdown-min-width: 19.5rem !default; +$dropdown-box-shadow: $box-shadow !default; +$dropdown-border-color: gray( 'concrete' ); +$dropdown-item-padding-y: 0.25rem !default; +$dropdown-item-padding-x: 1.5rem !default; +$dropdown-link-color: $body-color !default; +$dropdown-link-hover-color: $link-color !default; +$dropdown-link-hover-bg: #fff !default; +$dropdown-link-hover-decoration: underline !default; +$dropdown-link-active-color: $link-color !default; +$dropdown-link-active-bg: #fff !default; +$dropdown-link-active-font-weight: 700 !default; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_root.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_root.scss index 1e661189..280259a2 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_root.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_root.scss @@ -1,8 +1,19 @@ :root { + text-underline-offset: 0.25em; + + /* -------------------------------------------------------------- + Theme.json + -------------------------------------------------------------- */ --color-palette-primary: #{theme-color( 'primary' )}; --color-palette-secondary: #{theme-color( 'secondary' )}; --color-palette-white: #fff; --color-palette-black: #000; --layout-content-size: 800px; --layout-wide-size: #{map-get( $container-max-widths, 'xl' )}; + + /* -------------------------------------------------------------- + Overwrite NLDS variables + -------------------------------------------------------------- */ + --denhaag-sidenav-link-hover-color: #{theme-color( 'primary' )}; + --denhaag-sidenav-link-active-color: #{theme-color( 'primary' )}; } diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_variables.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_variables.scss index 7882fb42..e5a689df 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_variables.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/settings/_variables.scss @@ -31,6 +31,12 @@ $bar-background-color: rgba( 175, 204, 255, 0.12 ); $g-color: gray( 'graphic' ); $g-color-checked: theme-color( 'primary' ); +/* -------------------------------------------------------------- + Mijn Zaken: footer +-------------------------------------------------------------- */ +$mijn-zaken-footer-color: $white !default; +$mijn-zaken-footer-bg-color: theme-color( 'secondary' ) !default; + /* -------------------------------------------------------------- Tile block -------------------------------------------------------------- */ diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/style.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/style.scss index 930aa8c0..f43cbea6 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/style.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/style.scss @@ -4,12 +4,12 @@ @import 'settings/colors'; @import 'settings/bootstrap'; @import 'settings/variables'; -@import 'settings/root'; /*-------------------------------------------------------------- Tools --------------------------------------------------------------*/ @import 'tools/mixins'; +@import 'tools/helpers'; /*-------------------------------------------------------------- Vendor @@ -24,6 +24,8 @@ @import 'components/buttons'; @import 'components/datepicker'; @import 'components/digid'; +@import 'components/dropdown'; +@import 'components/footer'; @import 'components/gravityforms'; @import 'components/navbar'; @import 'components/progress-bar'; @@ -32,15 +34,32 @@ /*-------------------------------------------------------------- Elements --------------------------------------------------------------*/ +@import 'elements/headings'; @import 'elements/links'; +@import 'elements/lists'; @import 'elements/body'; /*-------------------------------------------------------------- Layouts --------------------------------------------------------------*/ @import 'layouts/template-fpe'; +@import 'layouts/template-mijn-zaken'; /*-------------------------------------------------------------- Blocks --------------------------------------------------------------*/ @import 'blocks/tile/shared'; +@import 'nlds/denhaag/tokens'; +@import 'nlds/denhaag/badge-counter'; +@import 'nlds/denhaag/dot-indicator'; +@import 'nlds/denhaag/icon'; +@import 'nlds/denhaag/sidenav'; +@import 'blocks/tasks/shared'; +@import 'blocks/affairs/shared'; +@import 'blocks/news/shared'; +@import 'blocks/personal-heading/shared'; + +/*-------------------------------------------------------------- + Root settings +--------------------------------------------------------------*/ +@import 'settings/root'; diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_helpers.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_helpers.scss new file mode 100644 index 00000000..45191fbe --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_helpers.scss @@ -0,0 +1,11 @@ +.white-space-nowrap { + white-space: nowrap; +} + +.gap-3 { + gap: 1rem; +} + +.gap-4 { + gap: 1.5rem; +} diff --git a/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_mixins.scss b/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_mixins.scss index 60218ba4..e31c91b6 100644 --- a/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_mixins.scss +++ b/htdocs/wp-content/themes/owc-formulieren/assets/scss/tools/_mixins.scss @@ -15,6 +15,7 @@ font-size: $btn-font-size; font-weight: $btn-font-weight; line-height: $btn-line-height; + text-decoration: none; transition: $btn-transition; @include hover-focus-active { @@ -169,7 +170,8 @@ } } -// Create the appropriate CSS for floating images. +// Create the appropriate CSS for floating images. See +// https://github.com/WordPress/gutenberg/issues/33385#issuecomment-893551418 @mixin create-float-alignment( $direction, $opposite-direction ) { @include media-breakpoint-up( sm ) { float: #{$direction}; // Only float starting from sm breakpoint diff --git a/htdocs/wp-content/themes/owc-formulieren/src/hooks.php b/htdocs/wp-content/themes/owc-formulieren/src/hooks.php index 42ea920d..b5840c0c 100644 --- a/htdocs/wp-content/themes/owc-formulieren/src/hooks.php +++ b/htdocs/wp-content/themes/owc-formulieren/src/hooks.php @@ -21,13 +21,6 @@ return dirname($stylesheet); }); -add_action('after_switch_theme', function () { - $stylesheet = get_option('template'); - if ('templates' !== basename($stylesheet)) { - update_option('template', $stylesheet . '/templates'); - } -}); - /** * Remove Gravity Forms styling */ diff --git a/htdocs/wp-content/themes/owc-formulieren/src/setup.php b/htdocs/wp-content/themes/owc-formulieren/src/setup.php index 043f13be..76b92ea3 100644 --- a/htdocs/wp-content/themes/owc-formulieren/src/setup.php +++ b/htdocs/wp-content/themes/owc-formulieren/src/setup.php @@ -45,6 +45,7 @@ // This theme uses wp_nav_menu() in one location. register_nav_menus([ 'primary' => __('Primary Menu', 'yard-startertheme'), + 'primary-mijn-zaken' => __('Mijn Zaken menu', 'yard-startertheme'), ]); }); diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/footer.php b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/footer.php new file mode 100644 index 00000000..b2c475d5 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/footer.php @@ -0,0 +1,49 @@ + + +
      +
      +
      +
      + +
      +
      + +
      +
      + +
      +
      +
      +
      +
      +
      + 'footer-bottom', + 'menu_class' => 'footer-bottom-menu list-unstyled mb-0', + 'container' => false, + 'depth' => 1, + ]); + } +?> + © - +
      +
      +
      +
      + + + + + + + \ No newline at end of file diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header.php b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header.php new file mode 100644 index 00000000..45224d0e --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header.php @@ -0,0 +1,28 @@ + + +> + + + + + + + + + + + + + +> + Spring naar content +
      + +
      \ No newline at end of file diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/dropdown-button.php b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/dropdown-button.php new file mode 100644 index 00000000..809ee7bc --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/dropdown-button.php @@ -0,0 +1,45 @@ + + first_name ? $current_user->first_name : $current_user->user_login; + ?> +
      + + +
      + + + + + + + + diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/navigation.php b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/navigation.php new file mode 100644 index 00000000..fc27a23e --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/header/navigation.php @@ -0,0 +1,10 @@ + diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/sidebar.php b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/sidebar.php new file mode 100644 index 00000000..ef014e11 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/mijn-zaken/sidebar.php @@ -0,0 +1,20 @@ + $sidebar_nav_menu_slug, + 'menu_class' => 'denhaag-sidenav__list', + 'container' => 'nav', + 'container_class' => 'denhaag-sidenav', + 'walker' => new App\Navigation\SideNavWalker(), + ] +); diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/page.php b/htdocs/wp-content/themes/owc-formulieren/templates/page.php index 48b99074..407aa280 100644 --- a/htdocs/wp-content/themes/owc-formulieren/templates/page.php +++ b/htdocs/wp-content/themes/owc-formulieren/templates/page.php @@ -1,5 +1,6 @@
      diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/partials/navigation.php b/htdocs/wp-content/themes/owc-formulieren/templates/partials/navigation.php index e7af7f88..ae51c76e 100644 --- a/htdocs/wp-content/themes/owc-formulieren/templates/partials/navigation.php +++ b/htdocs/wp-content/themes/owc-formulieren/templates/partials/navigation.php @@ -1,10 +1,10 @@ \ No newline at end of file diff --git a/htdocs/wp-content/themes/owc-formulieren/templates/template-mijn-zaken.php b/htdocs/wp-content/themes/owc-formulieren/templates/template-mijn-zaken.php new file mode 100644 index 00000000..b4bf1d38 --- /dev/null +++ b/htdocs/wp-content/themes/owc-formulieren/templates/template-mijn-zaken.php @@ -0,0 +1,18 @@ + +
      + +
      + +
      +
      +