From 72a9e53ce67135ef1f0d2bedf168e5eaaf5e3a6e Mon Sep 17 00:00:00 2001 From: "g.peirolo" Date: Thu, 22 Nov 2018 18:31:21 +0100 Subject: [PATCH 01/51] Autocomplete: HTML + SCSS --- _data/nav.yml | 1 + docs/componenti/form-input-autocomplete.md | 151 +++++++++++++++++++++ src/scss/custom/_autocomplete.scss | 151 +++++++++++++++++++-- src/scss/custom/_input-autocomplete.scss | 34 +++++ 4 files changed, 325 insertions(+), 12 deletions(-) create mode 100644 docs/componenti/form-input-autocomplete.md create mode 100644 src/scss/custom/_input-autocomplete.scss diff --git a/_data/nav.yml b/_data/nav.yml index e1852bf557..e929e40686 100755 --- a/_data/nav.yml +++ b/_data/nav.yml @@ -36,6 +36,7 @@ status: wip - title: Form Input status: wip + - title: Form Input Autocomplete - title: Form Select - title: Form Checkbox - title: Form Radio Button diff --git a/docs/componenti/form-input-autocomplete.md b/docs/componenti/form-input-autocomplete.md new file mode 100644 index 0000000000..c77972f3b0 --- /dev/null +++ b/docs/componenti/form-input-autocomplete.md @@ -0,0 +1,151 @@ +--- +layout: docs +title: Form Input Autocomplete +description: Elementi e stili per la creazione di input accessibili e responsivi. +group: componenti +toc: true +--- + + + +## Esempio + +Per ottenere l'autocomplete bisogna aggiungere all'input la classe `.autocomplete`. + + + +{% capture example %} +
+ + + + +
+{% endcapture %}{% include example.html content=example %} + +## Versione grande + +{% capture example %} +
+ + + + +
+{% endcapture %}{% include example.html content=example %} + + \ No newline at end of file diff --git a/src/scss/custom/_autocomplete.scss b/src/scss/custom/_autocomplete.scss index e5dff492dd..40a5aceaca 100644 --- a/src/scss/custom/_autocomplete.scss +++ b/src/scss/custom/_autocomplete.scss @@ -1,18 +1,145 @@ -.autocomplete-clear { - visibility: hidden; +//mobile + +.autocomplete { + padding: 0.375rem 0.75rem; + &::placeholder { + color: $neutral-1-a4; + } +} + +.autocomplete-icon { + position: absolute; + right: $v-gap*2; + top: 1.9rem; + .icon { + fill: $gray-secondary; + } +} + +.autocomplete-list { position: absolute; - z-index: 2; - right: .25rem; - top: .5rem; - background: transparent; - border: none; - cursor: pointer; - svg { - fill: #a6a6a6; + top: 4rem; + left: 0; + right: 0; + width: 100%; + background-color: $white; + padding: $v-gap 0; + box-shadow: $dropdown-box-shadow; + border-top: 1px solid $gray-secondary; + transition: opacity 0.3s; + display: none; + + li { + list-style-type: none; + padding: 0; + } + a { + padding: 12px $v-gap*3; + display: block; + display: flex; + justify-content: flex-start; + align-items: center; + color: $gray-primary; + &:hover { + color: $primary; + text-decoration: none; + .icon { + fill: $primary; + } + .autocomplete-list-label { + text-decoration: underline; + } + & > em { + color: $primary; + text-decoration: none; + } + } + .icon, .avatar { + margin-right: $v-gap*2; + } + .icon { + fill: $gray-primary; + } + .autocomplete-list-label { + font-size: 1.250rem; + } + & > em { + font-style: normal; + text-transform: uppercase; + font-size: 0.688rem; + color: $neutral-1-a4; + margin-left: $v-gap*2; + font-weight: bold; + letter-spacing: 0.1em; + display: inline-block; + margin-top: $v-gap; + } + } + mark { + padding: 0; + background: transparent; + font-weight: bold; + } +} + +.autocomplete-wrapper-big { + .autocomplete { + height: $v-gap*9; + font-size: 2.500rem; + font-weight: normal; } + .autocomplete-icon { + position: absolute; + left: 0; + right: auto; + top: 1.9rem; + .icon { + fill: $primary; + width: 40px; + height: 40px; + } + } +} + +//small - tablet +@media (min-width: #{map-get($grid-breakpoints, sm)}) { + + .autocomplete-list { + a { + font-size: 1.111rem; + span { + font-size: 0.611rem; + } + } + } + + .autocomplete-wrapper-big { + .autocomplete { + height: $v-gap*9; + font-size: 2.222rem; + } + } + } -.autocomplete-wrap { +//Tablet vertical +@media (min-width: #{map-get($grid-breakpoints, md)}) { + +} + +//Tablet horizontal / small desktop +@media (min-width: #{map-get($grid-breakpoints, lg)}) { + +} + +//Desktop +@media (min-width: #{map-get($grid-breakpoints, xl)}) { + +} + + + +/*.autocomplete-wrap { position: absolute; left: 0; right: 0; @@ -31,4 +158,4 @@ background: rgb(238, 238, 238); // TODO use a variable } } -} +}*/ \ No newline at end of file diff --git a/src/scss/custom/_input-autocomplete.scss b/src/scss/custom/_input-autocomplete.scss new file mode 100644 index 0000000000..5c6a6f2c51 --- /dev/null +++ b/src/scss/custom/_input-autocomplete.scss @@ -0,0 +1,34 @@ +//mobile + +.search-autocomplete-icon { + /*width: 28px; + height: 22px;*/ + position: absolute; + right: $v-gap*2; + top: 1.9rem; + z-index: 10; + //cursor: pointer; + svg { + fill: $gray-secondary; + } +} + +//small - tablet +@media (min-width: #{map-get($grid-breakpoints, sm)}) { + +} + +//Tablet vertical +@media (min-width: #{map-get($grid-breakpoints, md)}) { + +} + +//Tablet horizontal / small desktop +@media (min-width: #{map-get($grid-breakpoints, lg)}) { + +} + +//Desktop +@media (min-width: #{map-get($grid-breakpoints, xl)}) { + +} \ No newline at end of file From e6b7fede6097b46f3d21e7d2cef02d4256540557 Mon Sep 17 00:00:00 2001 From: "g.peirolo" Date: Fri, 23 Nov 2018 11:53:58 +0100 Subject: [PATCH 02/51] =?UTF-8?q?Autocomplete:=20HTML,=20SCSS=20e=20Docs,?= =?UTF-8?q?=20review=20accessibilit=C3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/componenti/form-input-autocomplete.md | 131 +++++++++++------- src/scss/custom/_autocomplete.scss | 153 ++++++++++++++++----- 2 files changed, 204 insertions(+), 80 deletions(-) diff --git a/docs/componenti/form-input-autocomplete.md b/docs/componenti/form-input-autocomplete.md index c77972f3b0..b04cfaf0ac 100644 --- a/docs/componenti/form-input-autocomplete.md +++ b/docs/componenti/form-input-autocomplete.md @@ -8,7 +8,7 @@ toc: true - -## Esempio - -Per ottenere design e funzionalità specifiche dell'autocomplete bisogna aggiungere all'input la classe `.autocomplete-search`. - -L'icona della lente è contenuta in uno `` con classe `.autocomplete-icon`, nascosta agli screen reader dall'attributo `aria-hidden="true"`. - -{% capture callout %} -La descrizione accessibile del campo è ottenuta con una label nascosta visivamente dalla classe `.sr-only`. -{% endcapture %}{% include callout.html content=callout type="accessibility" %} - -L'elenco dei risultati generati dalla ricerca è una lista