diff --git a/RELEASE.md b/RELEASE.md
index 594ea1e5b..b3ec4d307 100644
--- a/RELEASE.md
+++ b/RELEASE.md
@@ -32,8 +32,15 @@
## Versione X.X.X (dd/mm/yyyy)
+### Migliorie
+
+- ...
+
### Fix
+- Sono stati apportati alcuni aggiustamenti ai sottositi con l'intento di migliorare l'esperienza e aumentare l'accessibilità. Ci sono state modifiche, principalmente riguardanti i colori, alla visualizzazione della ricerca, ai blocchi info, al blocco contenuto in primo piano e al blocco icone.
+- È stata corretta la visualizzazione dei pulsanti nel blocco testo per i sottositi.
+- Sono stati corretti alcuni errori nel menu mobile per i sottositi. Ora la lente di ingrandimento è visibile nei sottositi con colori scuri e la freccia nei pulsanti "link ad altro" è del colore del sottosito.
- Reso il link ai diversi social elencati parlante, ora viene riportato "Seguici su nome_del_social"
- Sistemato lo skiplink "Vai al contenuto" nella pagina principale di ricerca del sito
- Migliorato l'HTML semantico per le card del blocco rss per migliorare l'esperienza d'uso con Screen Reader
diff --git a/src/components/ItaliaTheme/Blocks/Info/Edit.jsx b/src/components/ItaliaTheme/Blocks/Info/Edit.jsx
index 706e35702..9642ccec0 100644
--- a/src/components/ItaliaTheme/Blocks/Info/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/Info/Edit.jsx
@@ -9,12 +9,8 @@ import { connect } from 'react-redux';
import { compose } from 'redux';
import { injectIntl } from 'react-intl';
import cx from 'classnames';
-import {
- Container,
- Row,
- Col,
- Icon,
-} from 'design-react-kit/dist/design-react-kit';
+import { Container, Row, Col } from 'design-react-kit/dist/design-react-kit';
+import { Icon } from '@italia/components/ItaliaTheme';
import { createContent } from '@plone/volto/actions';
import { SidebarPortal } from '@plone/volto/components';
diff --git a/src/components/SelectInput/SelectInput.jsx b/src/components/SelectInput/SelectInput.jsx
index 2a72054fa..340bc9861 100644
--- a/src/components/SelectInput/SelectInput.jsx
+++ b/src/components/SelectInput/SelectInput.jsx
@@ -110,7 +110,7 @@ SelectContainer.propTypes = {
const Option = injectLazyLibs('reactSelect')((props) => {
const components = props.reactSelect.components;
return (
-
+
);
diff --git a/theme/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Blocks/_info.scss
index 99c577ea2..eb7ae44df 100644
--- a/theme/ItaliaTheme/Blocks/_info.scss
+++ b/theme/ItaliaTheme/Blocks/_info.scss
@@ -37,10 +37,19 @@ $tertiary-hover: darken($gray-border, 10%);
&.bg-color-true {
.draftjs-buttons a {
background-color: #fff;
+ border: 1px solid transparent;
color: $text-color;
+ span {
+ color: $text-color;
+ }
+
&:hover {
- background-color: #000;
+ background-color: $primary;
+ border-color: #fff;
color: #fff;
+ span {
+ color: #fff;
+ }
}
}
}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss
new file mode 100644
index 000000000..7955bf31c
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_info.scss
@@ -0,0 +1,51 @@
+@use '../../all_variables' as *;
+
+@mixin info($subsite-primary, $subsite-secondary, $subsite-light-theme) {
+ .public-ui {
+ .infoblock {
+ .bg-alert-primary,
+ .bg-alert-secondary,
+ .bg-alert-tertiary {
+ &.bg-color-true {
+ .draftjs-buttons {
+ a {
+ &:hover {
+ border-color: $body-color;
+ background-color: $subsite-primary;
+ @if $subsite-light-theme {
+ color: $body-color;
+ span {
+ color: $body-color;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ .bg-alert-primary {
+ svg.icon {
+ color: $subsite-primary;
+ fill: $subsite-primary;
+ }
+ &.bg-color-true {
+ p,
+ span,
+ svg.icon {
+ color: $body-color;
+ fill: $body-color;
+ }
+ }
+ .draftjs-buttons {
+ a {
+ background-color: $subsite-secondary;
+ color: #fff;
+ span {
+ color: #fff;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss
index d1735b397..b65cb8ed0 100644
--- a/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss
+++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_searchSections.scss
@@ -1,6 +1,11 @@
@use '../../all_variables' as *;
-@mixin block($subsite-primary, $subsite-secondary, $subsite-secondary-text) {
+@mixin block(
+ $subsite-primary,
+ $subsite-secondary,
+ $subsite-secondary-text,
+ $subsite-light-theme
+) {
.container .block {
.searchSections {
@if $subsite-secondary != $subsite-primary {
@@ -27,6 +32,11 @@
}
}
}
+ @if $subsite-light-theme {
+ button.rounded-right svg {
+ fill: $body-color !important;
+ }
+ }
}
}
}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss
new file mode 100644
index 000000000..21d9eb77c
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_cms-ui.scss
@@ -0,0 +1,18 @@
+@use '../all_variables' as *;
+
+@mixin cms-ui($subsite-primary, $subsite-secondary, $subsite-primary-text) {
+ &.cms-ui {
+ .color-list-widget {
+ .button {
+ &.primary,
+ &.primary.active {
+ background-color: $subsite-primary;
+ }
+ &.secondary,
+ &.secondary.active {
+ background-color: $subsite-secondary;
+ }
+ }
+ }
+ }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss
new file mode 100644
index 000000000..9040bb21f
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_main.scss
@@ -0,0 +1,59 @@
+@use '../all_variables' as *;
+
+@mixin main(
+ $subsite-primary,
+ $subsite-secondary,
+ $subsite-primary-text,
+ $subsite-link-color
+) {
+ &.public-ui,
+ &.cms-ui {
+ .draftjs-buttons {
+ a {
+ background-color: $subsite-primary;
+ border-radius: $subsite-primary;
+ color: $subsite-primary-text;
+
+ &:hover,
+ &:active {
+ background-color: darken($subsite-primary, 8);
+ color: $subsite-primary-text;
+ }
+ }
+ }
+ .pagination {
+ .page-item {
+ .page-link {
+ &[aria-current] {
+ border: 1px solid $subsite-primary;
+ color: $subsite-primary;
+ }
+ &:hover {
+ color: $subsite-link-color;
+ svg {
+ fill: $subsite-link-color !important;
+ }
+ }
+ }
+ }
+ }
+ .bg-primary {
+ background-color: $subsite-primary !important;
+ }
+ .bg-alert-primary {
+ border-color: $subsite-primary;
+ &.bg-color-true {
+ background-color: $subsite-primary !important;
+ }
+ }
+ .bg-secondary {
+ background-color: $subsite-secondary !important;
+ }
+ .bg-alert-secondary {
+ border-color: $subsite-secondary;
+ &.bg-color-true {
+ background-color: $subsite-secondary !important;
+ }
+ }
+ }
+}
diff --git a/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss b/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss
new file mode 100644
index 000000000..9aecfda4d
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/ItaliaTheme/_search.scss
@@ -0,0 +1,13 @@
+@mixin search($subsite-link-color) {
+ .search-results-wrapper {
+ .ordering-widget {
+ .react-select__option--is-focused {
+ border-color: $subsite-link-color !important;
+ box-shadow: 0 0 0 2px $subsite-link-color !important;
+ }
+ }
+ }
+ .toggles label input[type='checkbox']:checked + .lever:after {
+ background-color: $subsite-link-color;
+ }
+}
diff --git a/theme/ItaliaTheme/Subsites/_common.scss b/theme/ItaliaTheme/Subsites/_common.scss
index e0d6c0598..0286c2cbd 100644
--- a/theme/ItaliaTheme/Subsites/_common.scss
+++ b/theme/ItaliaTheme/Subsites/_common.scss
@@ -7,6 +7,7 @@
@import '~bootstrap-italia/src/scss/functions';
@import '~bootstrap-italia/src/scss/utilities/colors_vars';
@import '~bootstrap-italia/src/scss/variables';
+@import 'templates/light-theme-common';
@import 'mixin';
@import 'homepage';
@import '../../site-variables';
diff --git a/theme/ItaliaTheme/Subsites/_mixin.scss b/theme/ItaliaTheme/Subsites/_mixin.scss
index c263fedc4..c0e9f187f 100644
--- a/theme/ItaliaTheme/Subsites/_mixin.scss
+++ b/theme/ItaliaTheme/Subsites/_mixin.scss
@@ -9,6 +9,7 @@
@use 'bootstrap-italia/custom/buttons' as bs-buttons;
@use 'bootstrap-italia/custom/chips' as bs-chips;
@use 'bootstrap-italia/custom/card' as bs-card;
+@use 'bootstrap-italia/custom/forms' as bs-forms;
@use 'bootstrap-italia/custom/dropdown' as bs-dropdown;
@use 'bootstrap-italia/custom/linklist' as bs-linklist;
@use 'bootstrap-italia/custom/navscroll' as bs-navscroll;
@@ -19,8 +20,12 @@
@use 'ItaliaTheme/Blocks/highlitedContent' as it-highlight;
@use 'ItaliaTheme/Blocks/argumentsInEvidence' as it-args-evidence;
@use 'ItaliaTheme/Blocks/searchSections' as it-search-sections;
+@use 'ItaliaTheme/Blocks/info' as it-info;
@use 'ItaliaTheme/Views/common' as it-views;
@use 'ItaliaTheme/common' as it-common;
+@use 'ItaliaTheme/cms-ui' as it-cms-ui;
+@use 'ItaliaTheme/search' as it-search;
+@use 'ItaliaTheme/main' as it-main;
@mixin define-subsite(
$subsite-style,
@@ -78,10 +83,23 @@
$subsite-secondary-text
);
@include bs-card.card($subsite-primary, $subsite-link-color);
+ @include bs-forms.forms($subsite-link-color);
@include bs-dropdown.dropdown($subsite-link-color);
@include bs-linklist.linklist($subsite-primary, $subsite-link-color);
@include bs-navscroll.navscroll($subsite-link-color);
@include it-footer.footer($subsite-primary, $subsite-primary-text);
+ @include it-main.main(
+ $subsite-primary,
+ $subsite-secondary,
+ $subsite-primary-text,
+ $subsite-link-color
+ );
+ @include it-cms-ui.cms-ui(
+ $subsite-primary,
+ $subsite-secondary,
+ $subsite-primary-text
+ );
+ @include it-search.search($subsite-link-color);
@include it-card-image-evidence.card($subsite-link-color);
@include it-complete-link.block(
$subsite-secondary,
@@ -93,8 +111,15 @@
@include it-search-sections.block(
$subsite-primary,
$subsite-secondary,
- $subsite-secondary-text
+ $subsite-secondary-text,
+ $subsite-light-theme
);
+ @include it-info.info(
+ $subsite-primary,
+ $subsite-secondary,
+ $subsite-light-theme
+ );
+
@include it-views.common(
$subsite-primary,
$subsite-secondary,
@@ -111,10 +136,12 @@
color: color-hover($subsite-link-color);
}
}
-
- .icon-primary {
- fill: $subsite-primary !important;
- }
+ }
+ .icon-primary {
+ fill: $subsite-primary !important;
+ }
+ .btn-link {
+ color: $subsite-link-color;
}
}
}
diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss
new file mode 100644
index 000000000..1ca3ef524
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_forms.scss
@@ -0,0 +1,18 @@
+@use '../../all_variables' as *;
+
+@mixin forms($subsite-link-color) {
+ .public-ui .form-check {
+ [type='checkbox'],
+ [type='radio'] {
+ &:checked + label {
+ &::after {
+ border-color: $subsite-link-color;
+ background-color: $subsite-link-color;
+ }
+ &::before {
+ border-color: $subsite-link-color;
+ }
+ }
+ }
+ }
+}
diff --git a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss
index d03251a88..388a7a058 100644
--- a/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss
+++ b/theme/ItaliaTheme/Subsites/bootstrap-italia/custom/_headercenter.scss
@@ -44,13 +44,12 @@
a {
&.rounded-icon {
svg {
- @if $subsite-light-theme {
- fill: $subsite-primary-text;
- } @else {
- fill: $subsite-primary;
- }
+ fill: $subsite-primary-text;
}
}
+ &.search-link {
+ outline-color: $subsite-primary-text !important;
+ }
}
}
}
diff --git a/theme/ItaliaTheme/Subsites/templates/_light-pink.scss b/theme/ItaliaTheme/Subsites/templates/_light-pink.scss
index 5c0a3c713..e3f196f49 100644
--- a/theme/ItaliaTheme/Subsites/templates/_light-pink.scss
+++ b/theme/ItaliaTheme/Subsites/templates/_light-pink.scss
@@ -17,5 +17,13 @@ body.subsite-light-pink {
}
}
}
+ .infoblock {
+ .bg-alert-primary {
+ svg.icon {
+ color: $subsite-light-pink-secondary;
+ fill: $subsite-light-pink-secondary;
+ }
+ }
+ }
}
}
diff --git a/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss b/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss
new file mode 100644
index 000000000..459e59a18
--- /dev/null
+++ b/theme/ItaliaTheme/Subsites/templates/_light-theme-common.scss
@@ -0,0 +1,51 @@
+body {
+ &[class*='subsite-light'] {
+ .public-ui {
+ .icon-primary {
+ fill: $pager-font-color !important;
+ }
+ }
+ &.public-ui,
+ &.cms-ui {
+ .pagination {
+ .page-item {
+ .page-link[aria-current] {
+ border: 1px solid $pager-font-color !important;
+ color: $pager-font-color !important;
+ }
+ }
+ }
+ }
+ .block.highlitedContent {
+ .bg-primary .card .card-body {
+ .card-title a,
+ .card-text {
+ color: $body-color;
+ }
+ .categoryicon-top {
+ .text,
+ .icon,
+ .data {
+ color: $body-color;
+ fill: $body-color;
+ }
+ }
+ }
+ }
+ .search-container {
+ .filter-wrapper {
+ &.select-filter {
+ .react-select__control {
+ .react-select__placeholder,
+ .react-select__single-value {
+ color: $body-color !important;
+ }
+ .react-select__indicators svg {
+ fill: $body-color;
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/theme/bootstrap-override/bootstrap-italia/_headercenter.scss b/theme/bootstrap-override/bootstrap-italia/_headercenter.scss
index cd72208b5..447347c6d 100644
--- a/theme/bootstrap-override/bootstrap-italia/_headercenter.scss
+++ b/theme/bootstrap-override/bootstrap-italia/_headercenter.scss
@@ -15,7 +15,7 @@
.it-search-wrapper {
a.search-link {
- outline: $header-center-bg-color 2px solid !important;
+ outline: $header-center-bg-color 1px solid !important;
&:focus {
box-shadow: 0 0 0 5px $focus-outline-color !important;
diff --git a/theme/extras/_search.scss b/theme/extras/_search.scss
index 90c1d92c0..bd59427b1 100644
--- a/theme/extras/_search.scss
+++ b/theme/extras/_search.scss
@@ -107,6 +107,7 @@ body.search-modal-opened {
}
.react-select__option--is-focused {
+ color: #fff;
border-color: var(--focus-outline-color) !important;
box-shadow: 0 0 0 2px var(--focus-outline-color) !important;
outline: none !important;