Unverified Commit 2278ec80 authored by alexpott's avatar alexpott
Browse files

Issue #2983568 by kjay, smaz, John Cook, andrewmacpherson, alexpott,...

Issue #2983568 by kjay, smaz, John Cook, andrewmacpherson, alexpott, markconroy, emma.maria, Eli-T, mairi, jogordon: Audit and improve focus styles across the Umami theme for logged out users
parent 05bbd9d0
......@@ -13,6 +13,13 @@ html {
margin-top: 0; /* This allows us to ensure that items side-by-side line up nicely. */
}
*:focus {
outline-offset: 2px; /* Not supported in IE11 but greatly improves outline visibility in newer browsers. */
outline-color: #00836d;
outline-style: dotted;
outline-width: 1px;
}
a {
color: #00836d;
text-decoration: underline;
......@@ -20,9 +27,7 @@ a {
a:hover,
a:focus {
background-color: #e6eee0;
color: #444;
text-decoration: none;
outline-offset: 1px;
color: #cc2a00;
}
body {
......@@ -55,20 +60,27 @@ blockquote a:focus {
background-color: #fdfcf9;
}
.button {
button,
.button,
[type='button'],
[type='reset'],
[type='submit'] {
display: inline-block;
padding: 0.7rem 1.3rem;
border: 2px solid #00836d;
border-radius: 3px;
background-color: #00836d;
border: 3px solid #00836d;
border-radius: 4px;
color: #fff;
cursor: pointer;
display: inline-block;
padding: 0.4em 1.5em;
text-align: center;
text-decoration: none;
font-family: 'Scope One', Georgia, serif;
font-size: 1.2rem;
font-weight: 400;
transition: background-color 0.5s ease;
min-width: inherit;
max-width: inherit;
margin: 0;
}
button:hover,
button:active,
......@@ -77,7 +89,6 @@ button:focus,
.button:active,
.button:focus {
background-color: #e6eee0;
border: 3px solid #00836d;
color: #000;
text-decoration: none;
transition: background-color 0.5s ease;
......@@ -196,8 +207,11 @@ input {
padding: 0.8rem 0.4rem;
}
input:focus {
border: 3px solid #00836d;
margin-bottom: 2px;
border: 2px solid #00836d;
}
input[type='checkbox'] {
min-width: inherit;
max-width: none;
}
textarea {
......@@ -206,8 +220,7 @@ textarea {
padding: 0.8rem 0.4rem;
}
textarea:focus {
border: 3px solid #00836d;
margin-bottom: 2px;
border: 2px solid #00836d;
}
label {
......
......@@ -24,9 +24,9 @@
.block-type-banner-block .field--name-field-content-link a {
display: inline-block;
padding: 0.5em 1.5em 0.4em;
border: 0;
border-radius: 4px;
padding: 0.7em 1.3em;
border: 2px solid #d93760;
border-radius: 3px;
background-color: #d93760;
color: #fff;
cursor: pointer;
......@@ -40,10 +40,11 @@
.block-type-banner-block .field--name-field-content-link a:focus,
.block-type-banner-block .field--name-field-content-link a:hover {
background-color: #00836d;
color: #fff;
box-shadow: 0 0 0 2px currentColor inset;
outline: none;
background-color: #fcece7;
color: #000;
border-color: #d93760;
outline-offset: 2px;
outline-color: #fff;
}
/* 768px */
......
......@@ -20,7 +20,8 @@
max-width: 205px;
background-color: inherit;
}
.site-logo:hover {
.site-logo:hover,
.site-logo:focus {
background-color: inherit;
}
......
......@@ -16,30 +16,6 @@
margin-bottom: 1.28rem;
}
.block-type-footer-promo-block .footer-promo-content a {
background-color: inherit;
color: #fff;
font-weight: 700;
}
.block-type-footer-promo-block .footer-promo-content a:active,
.block-type-footer-promo-block .footer-promo-content a:focus,
.block-type-footer-promo-block .footer-promo-content a:hover {
background-color: transparent;
}
.block-type-footer-promo-block .footer-promo-content a:after {
display: inline-block;
width: 14px;
height: 14px;
content: '';
background: url('../../../../images/svg/pointer--white.svg') no-repeat center center;
vertical-align: middle;
}
[dir=rtl] .block-type-footer-promo-block .footer-promo-content a:after {
transform: rotate(180deg);
}
@media screen and (min-width: 60rem) {
.block-type-footer-promo-block {
flex-basis: 60%;
......
......@@ -34,9 +34,10 @@
color: #fff;
font-weight: bold;
}
.block-views-blockrecipe-collections-block .views-row a:active,
.block-views-blockrecipe-collections-block .views-row a:focus,
.block-views-blockrecipe-collections-block .views-row a:hover {
text-decoration: underline;
background: transparent;
outline-color: #fff;
}
......@@ -48,7 +48,6 @@
}
.search-link:focus,
.search-link:hover {
outline: 3px solid #00836d;
background-color: #fff;
}
.search-link svg {
......@@ -61,37 +60,65 @@
.form-type-search {
margin-top: 0;
margin-bottom: 0;
border: 1px solid #dbdbdb;
border-top-left-radius: 3px; /* LTR */
border-bottom-right-radius: 3px; /* LTR */
}
[dir=rtl] .form-type-search {
border-top-left-radius: 0;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 0;
}
.search-form .form-type-search {
border: none;
}
.form-search {
width: 20em;
max-width: calc(100vw - 6.25em);
width: auto;
height: auto;
margin: 0 -2px 0 0; /* LTR */
margin: 0 80px 0 0; /* LTR */
padding: 7px 8px 7px 32px;
color: #464646;
border: 1px solid #dbdbdb; /* LTR */
border-right: none; /* LTR */
border-radius: 3px;
border: 2px solid #fff;
background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
font-size: 0.875rem;
line-height: normal;
}
[dir=rtl] .form-search {
margin: 0 0 0 80px;
}
@media screen and (min-width: 48em) {
.form-search {
width: 14em;
}
}
.search-form .form-search {
border: 1px solid #dbdbdb;
border-radius: 3px;
width: 20em;
margin: 0 -2px 0 0; /* LTR */
max-width: calc(100vw - 6.25em);
}
[dir=rtl] .search-form .form-search {
margin: 0 0 0 -2px;
border-left: none;
border-right: 1px solid #dbdbdb;
}
.form-search:focus {
margin: 0 0 -2px -2px; /* LTR */
padding: 5px 8px 5px 32px;
outline: none;
border: 2px solid #00836d;
border-top-left-radius: 2px; /* LTR */
border-bottom-left-radius: 2px; /* LTR */
}
[dir=rtl] .form-search:focus {
margin: 0 -2px -2px 0;
background-position: 0.35em;
border: 3px solid #00836d;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.search-form .form-search:focus {
border: 1px solid #00836d;
}
.form-search::placeholder {
......@@ -104,23 +131,50 @@
/* Search submit */
.search-block-form .form-actions {
position: relative;
z-index: 1;
margin-top: 0;
margin-bottom: 0;
border-top: 1px solid #dbdbdb;
border-bottom: 1px solid #dbdbdb;
border-right: 1px solid #dbdbdb; /* LTR */
border-top-right-radius: 3px; /* LTR */
border-bottom-right-radius: 3px; /* LTR */
}
.search-block-form .form-submit,
.search-form .form-submit {
/* Take off the border radius on the left side as it bumps into the search field */
border-top-left-radius: 0; /* LTR */
border-bottom-left-radius: 0; /* LTR */
}
[dir=rtl] .search-block-form .form-submit,
[dir=rtl] .search-form .form-submit {
/* Take off the border radius on the left side as it bumps into the search field */
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
[dir=rtl] .search-block-form .form-actions {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-right: none;
border-left: 1px solid #dbdbdb;
}
.search-block-form .form-submit,
.search-form .form-submit {
padding: 0.6em 1.25em 0.4em;
margin: 0;
border: 2px solid #fff;
font-size: 0.875rem;
background-color: #fff;
color: #000;
transition: background-color 0.5s ease;
transition: border 0.5s ease;
}
@media screen and (min-width: 48em) {
.search-block-form .form-submit,
.search-form .form-submit {
border-top-left-radius: 0; /* LTR */
border-bottom-left-radius: 0; /* LTR */
}
[dir=rtl] .search-block-form .form-submit,
[dir=rtl] .search-form .form-submit {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-bottom-left-radius: 3px;
border-top-left-radius: 3px;
}
}
.search-form .form-submit {
border: 1px solid #dbdbdb;
}
.search-block-form .form-submit:focus,
......@@ -128,14 +182,12 @@
.search-form .form-submit:focus,
.search-form .form-submit:hover {
margin: 0;
border-top-left-radius: 4px; /* LTR */
border-bottom-left-radius: 4px; /* LTR */
}
/* Apply border radius to all corners to override LTR and RTL (normal state) changes. */
[dir=rtl] .search-block-form .form-submit:focus,
[dir=rtl] .search-block-form .form-submit:hover,
[dir=rtl] .search-form .form-submit:focus,
[dir=rtl] .search-form .form-submit:hover {
margin: 0;
border-radius: 4px;
background-color: #e6eee0;
border: 2px solid #00836d;
outline-offset: 2px;
}
.search-form .form-submit:focus,
.search-form .form-submit:hover {
border: 1px solid #00836d;
}
......@@ -5,23 +5,9 @@
.form-actions {
display: inline-flex;
}
.form-actions .button {
margin-left: 1em;
}
.form-actions .button:first-child {
margin-left: 0;
}
.form-submit {
padding: 0.6em 1.25em 0.4em;
margin: 0;
border: 1px solid #dbdbdb;
font-size: 0.875rem;
background-color: #fff;
color: #000;
}
.form-submit:hover,
.form-submit:focus {
padding: calc(0.6em - 2px) calc(1.25em - 2px) calc(0.4em - 2px) calc(1.25em - 2px);
}
......@@ -13,7 +13,6 @@
text-align: left;
}
}
.menu-account {
display: inline-flex;
margin: 0;
......@@ -29,11 +28,13 @@
margin-right: 1em;
}
.menu-account__link,
.menu-account__link:hover {
.menu-account__link:hover,
.menu-account__link:focus {
text-decoration: none;
color: inherit;
background-color: inherit;
}
.menu-account__link:hover {
.menu-account__link:hover,
.menu-account__link:focus {
text-decoration: underline;
}
......@@ -14,18 +14,22 @@
.menu-footer__item {
list-style: none;
margin-bottom: 0.5em;
}
.menu-footer .menu-footer__link {
background-color: transparent;
font-weight: 700;
background-color: inherit;
color: #fff;
font-weight: 700;
text-decoration: none;
}
.menu-footer .menu-footer__link:active,
.menu-footer .menu-footer__link:focus,
.menu-footer .menu-footer__link:hover {
background-color: transparent;
background-color: #000;
outline-color: #fff;
text-decoration: underline;
}
@media screen and (min-width: 60rem) {
......
......@@ -50,6 +50,8 @@
.menu-main__link {
background-color: inherit;
display: inline-block;
/* Margin required for focus outlines. */
margin: 5px 3px;
padding-bottom: 0.15em;
text-decoration: none;
border-bottom: solid 0.15em transparent;
......@@ -61,7 +63,7 @@
.menu-main__link:focus {
background-color: inherit;
text-decoration: none;
border-bottom-color: rgba(255, 97, 56, 0.3);
border-bottom-color: #da3c13;
color: #da3c13;
}
.menu-main__link:active,
......
......@@ -4,17 +4,22 @@
*/
.read-more__link {
box-sizing: border-box;
background-color: inherit;
position: relative;
display: inline-block;
padding-right: 20px;
text-decoration: none;
text-transform: uppercase;
border-bottom: 1px solid transparent;
}
.read-more__link:focus,
.read-more__link:hover {
text-decoration: underline;
background-color: inherit;
text-decoration: none;
color: #00836d;
border-bottom: 1px solid #00836d;
}
.read-more__link:before {
......
......@@ -35,4 +35,5 @@
.tabs a:focus,
.tabs a:hover {
background-color: #fff;
outline-offset: -5px;
}
......@@ -25,3 +25,16 @@
justify-content: space-between;
}
}
.footer a {
background-color: inherit;
color: #fff;
font-weight: 400;
}
.footer a:active,
.footer a:focus,
.footer a:hover {
background-color: #000;
outline-color: #fff;
}
/**
* @file
* This file is used to style the admin toolbar.
*
* Button styles in /css/base.css change the font for the 'Edit' button
* in the admin toolbar - set this back to inherit, which normalize.css does.
*/
.toolbar button {
font-family: inherit;
}
......@@ -34,6 +34,7 @@ global:
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
css/components/regions/pre-header/pre-header.css: {}
css/components/toolbar/toolbar.css: {}
layout:
css/layout/grid-2.css: {}
css/layout/grid-3.css: {}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment