diff --git a/front/css/a11y.sass b/front/css/a11y.sass new file mode 100644 index 0000000..23553d3 --- /dev/null +++ b/front/css/a11y.sass @@ -0,0 +1,72 @@ +/* + * Focus States + */ + + // thanks @cityssm/bulma-a11y + +a:focus, +button:focus + outline-color: $black + outline-offset: 4px + outline-style: dotted !important + outline-width: 2px !important + + .has-background-black &, + .has-background-dark & + outline-color: $white + +a:focus + + .has-text-white + outline-color: $white + +.button:focus + + &.is-black + outline-color: $black + + &.is-danger + outline-color: $danger-dark + + &.is-dark + outline-color: $dark + + &.is-info + outline-color: $info-dark + + &.is-link + outline-color: $link-dark + + &.is-primary + outline-color: $primary-dark + + &.is-success + outline-color: $success-dark + + &.is-warning + outline-color: $warning-dark + + .has-background-black &.is-inverted, + .has-background-dark &.is-inverted + outline-color: $white + +/* + * Skip Links + */ + +a.is-sr-only:focus, +button.is-sr-only:focus + position: fixed !important + top: 10px + left: 10px + z-index: 100 + width: initial !important + height: initial !important + padding: $button-padding-vertical $button-padding-horizontal !important + overflow: initial !important + clip: initial !important + white-space: initial !important + + &:not(.button) + background-color: $body-background-color + border: initial !important diff --git a/front/css/app.sass b/front/css/app.sass index 49fdd26..a422811 100644 --- a/front/css/app.sass +++ b/front/css/app.sass @@ -28,6 +28,7 @@ @import "bulma/sass/helpers/other" @import "bulma/sass/layout/section" @import "bulma/sass/layout/footer" +@import "a11y" @import "movie-card" @import "fonts"