form select arrow

focused elements styling
This commit is contained in:
Yves Gatesoupe 2020-06-26 16:32:56 +02:00
parent d7dae99529
commit b8c1d5a79d
7 changed files with 32 additions and 6 deletions

View File

@ -14,7 +14,7 @@
--color-selection-bg: #{get-color('dark')}; --color-selection-bg: #{get-color('dark')};
--color-stroke: #{get-color('mid')}; --color-stroke: #{get-color('mid')};
--color-action-bg: #{get-color('primary')}; --color-action-bg: #{get-color('primary')};
--color-action-text: #{get-color('light')}; --color-action-text: #{get-color('dark')};
--color-theme-primary: #{get-color('primary')}; --color-theme-primary: #{get-color('primary')};
--color-theme-primary-glare: #{get-color('primary-glare')}; --color-theme-primary-glare: #{get-color('primary-glare')};
--color-theme-highlight: #{get-color('highlight')}; --color-theme-highlight: #{get-color('highlight')};

View File

@ -24,9 +24,9 @@
} }
.button:focus:not(:hover), .button:focus:not(:hover),
.btn:focus:not(:hover) { .btn:not(button):focus:not(:hover) {
outline: 1px solid var(--color-action-text); outline: 1px dotted var(--color-white);
outline-offset: -4px; outline-offset: -1rem;
} }
.button:active, .button:active,
@ -44,6 +44,10 @@
font-size: 1.125rem; font-size: 1.125rem;
font-weight: 600; font-weight: 600;
&:focus {
outline: none;
}
+ .btn { + .btn {
margin-left: 2rem; margin-left: 2rem;
} }
@ -52,6 +56,10 @@
color: var(--color-dark); color: var(--color-dark);
background-color: var(--color-primary); background-color: var(--color-primary);
font-weight: 700; font-weight: 700;
&:focus:not(:hover) {
outline-color: var(--color-dark);
}
} }
&.btn-secondary { &.btn-secondary {

View File

@ -48,6 +48,11 @@ select {
padding: .75rem 1.5rem; padding: .75rem 1.5rem;
border-radius: 1.5rem; border-radius: 1.5rem;
width: 100%; width: 100%;
&:focus {
outline: none;
box-shadow: var(--color-dark) 0 0 1.5px 1px;
}
} }
textarea { textarea {
@ -55,6 +60,11 @@ textarea {
} }
select { select {
background-image: url("data:image/svg+xml,%3Csvg width='32' height='48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23 32l-7.794-12h15.588L23 32z' fill='%23333'/%3E%3C/svg%3E");
background-repeat: no-repeat;
/* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
background-position: right 1.5rem top 50%;
background-size: 2rem 3rem;
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;

View File

@ -1,5 +1,5 @@
.heading-permalink { .heading-permalink {
color: var(--color-theme-primary-glare); color: var(--color-dark);
font-size: .8em; font-size: .8em;
margin-left: .3em; margin-left: .3em;
margin-top: .2em; margin-top: .2em;

View File

@ -28,6 +28,10 @@
&:hover { &:hover {
text-decoration: none; text-decoration: none;
} }
&:focus {
outline-color: var(--color-white);
}
} }
&__credit { &__credit {

View File

@ -6,5 +6,9 @@
font-weight: 700; font-weight: 700;
text-decoration: none; text-decoration: none;
color: var(--color-text); color: var(--color-text);
&:focus {
outline-color: var(--color-secondary);
}
} }
} }

View File

@ -48,7 +48,7 @@ img {
} }
:focus { :focus {
outline: 1px solid var(--color-theme-primary-glare); outline: 1px solid var(--color-dark);
outline-offset: 0.25rem; outline-offset: 0.25rem;
} }