Skip to content

Commit

Permalink
A11y changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@francescozaia
francescozaia committed Dec 14, 2018
1 parent fbc34f1 commit 568a5d6
Show file tree
Hide file tree
Showing 7 changed files with 41 additions and 108 deletions.
2 changes: 1 addition & 1 deletion _data/nav.yml
View file
Expand Up @@ -67,14 +67,14 @@
- title: Alert
- title: Avatar
- title: Badge
- title: Barre di Avanzamento
- title: Bottoni
status: wip
#- title: Button group
# status: to do
- title: Card
- title: Callout
- title: Carousel
status: wip # Lacks a11y
- title: Chips
- title: Collapse
- title: Cookiebar
Expand Down
12 changes: 6 additions & 6 deletions docs/componenti/affix.md
View file
Expand Up @@ -62,10 +62,10 @@ Per ancorare un elemento alla parte alta della pagina è sufficiente applicare l
<div class="affix-example container">
<div class="row">
<div class="col-6 col-md-3 p-2 affix-parent">
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Lorem ipsum</p>
</div>
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Dolor sit</p>
</div>
<div class="primary-bg p-3 affix-top">
Expand Down Expand Up @@ -93,16 +93,16 @@ Per ancorare un elemento alla parte alta della pagina è sufficiente applicare l
<div class="affix-example container">
<div class="row">
<div class="col-6 col-md-3 p-2 affix-parent">
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Lorem ipsum</p>
</div>
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Dolor sit</p>
</div>
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Lorem ipsum</p>
</div>
<div class="primary-bg-a3 p-3 mb-1">
<div class="neutral-1-bg-a7 p-3 mb-1">
<p class="mb-0 white-color">Dolor sit</p>
</div>
<div class="primary-bg p-3 affix-bottom">
Expand Down
2 changes: 0 additions & 2 deletions docs/componenti/badge.md
View file
Expand Up @@ -6,8 +6,6 @@ group: componenti
toc: true
---

## Esempio

La grandezza di ogni badge si adatta come dimensione a quella del font (misurato in unità `em`) dell'elemento in cui è contenuto.

<div class="bd-example">
Expand Down
89 changes: 0 additions & 89 deletions docs/componenti/barre-di-avanzamento.md
View file

This file was deleted.

6 changes: 3 additions & 3 deletions docs/componenti/callout.md
View file
Expand Up @@ -22,7 +22,7 @@ Nel caso l'icona comunicasse visivamente contenuti non disponibili nel testo (ad

{% capture example %}
<div class="callout">
<div class="callout-title"><svg class="icon icon-primary"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-info-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<div class="callout-title"><svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-info-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
{% endcapture %}{% include example.html content=example %}
Expand All @@ -35,7 +35,7 @@ Aggiungere la classe `.success` per indicare una procedura andata a buon fine.

{% capture example %}
<div class="callout success">
<div class="callout-title"><svg class="icon icon-primary"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-check-circle"></use></svg>Usa</div>
<div class="callout-title"><svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-check-circle"></use></svg>Usa</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
{% endcapture %}{% include example.html content=example %}
Expand Down Expand Up @@ -167,7 +167,7 @@ Il bottone di controllo del Collapse può essere affiancato da un link per downl
<button class="callout-more-toggle" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">
Leggi tutto <span></span>
</button>
<a href="#" class="callout-more-download"><svg class="icon icon-primary"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-download"></use></svg><span class="sr-only">PDF </span> Download</a>
<a href="#" class="callout-more-download"><svg class="icon"><use xlink:href="{{ site.baseurl }}/dist/svg/sprite.svg#it-download"></use></svg><span class="sr-only">PDF </span> Download</a>
</div>
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1">
<div class="collapse-body">
Expand Down
19 changes: 19 additions & 0 deletions src/scss/custom/_callout.scss
View file
Expand Up @@ -146,6 +146,25 @@
border-color: $primary-a9;
}
}
.collapse-div .collapse-header .callout-more-toggle {
color: $primary-a9;
&:active, &:hover {
color: $primary-a9;
}
span {
border-color: $primary-a9;
&:before,
&:after {
background: $primary-a9;
}
}
}
a {
color: $primary-a9;
}
.icon {
fill: $primary-a9;
}
}

//title
Expand Down
19 changes: 12 additions & 7 deletions src/scss/utilities/colors_vars.scss
View file
Expand Up @@ -43,11 +43,16 @@ $teal: hsb(178, 95, 85) !default;
$cyan: hsb(178, 100, 100) !default;
$blue: hsb(210, 100, 90) !default;
$light: hsb(255, 5, 95) !default;
$dark: hsb(210, 70, 30) !default; // #17324D
$dark: hsb(210, 70, 30) !default;

$gray-primary: hsb(210, 38.9, 44.3) !default; // #455b71
$gray-secondary: hsb(210, 29, 51) !default; // #5c6f82
$gray-tertiary: hsb(205, 35, 54) !default; // #5A768A
$red-accessible: hsb(351, 75, 85) !default;
$orange-accessible: hsb(36, 100, 65) !default;
$yellow-accessible: hsb(44, 100, 59) !default;
$green-accessible: hsb(159, 100, 53) !default;

$gray-primary: hsb(210, 38.9, 44.3) !default;
$gray-secondary: hsb(210, 29, 51) !default;
$gray-tertiary: hsb(205, 35, 54) !default;
$gray-quaternary: hsb(238, 1, 100) !default;
$gray-disabled: hsb(225, 5, 95) !default;
$gray-label-disabled: hsb(222, 5, 79) !default;
Expand Down Expand Up @@ -79,10 +84,10 @@ $primary: $blue !default;
$secondary: $gray-secondary !default;

// Info Colors
$success: $green !default;
$success: $green-accessible !default;
$info: $gray-400 !default;
$warning: $orange !default;
$danger: $red !default;
$warning: $orange-accessible !default;
$danger: $red-accessible !default;

$theme-colors: () !default;
$theme-colors: map-merge((
Expand Down

0 comments on commit 568a5d6

Please sign in to comment.