form select arrow
focused elements styling
This commit is contained in:
parent
d7dae99529
commit
b8c1d5a79d
@ -14,7 +14,7 @@
|
||||
--color-selection-bg: #{get-color('dark')};
|
||||
--color-stroke: #{get-color('mid')};
|
||||
--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-glare: #{get-color('primary-glare')};
|
||||
--color-theme-highlight: #{get-color('highlight')};
|
||||
|
@ -24,9 +24,9 @@
|
||||
}
|
||||
|
||||
.button:focus:not(:hover),
|
||||
.btn:focus:not(:hover) {
|
||||
outline: 1px solid var(--color-action-text);
|
||||
outline-offset: -4px;
|
||||
.btn:not(button):focus:not(:hover) {
|
||||
outline: 1px dotted var(--color-white);
|
||||
outline-offset: -1rem;
|
||||
}
|
||||
|
||||
.button:active,
|
||||
@ -44,6 +44,10 @@
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
+ .btn {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
@ -52,6 +56,10 @@
|
||||
color: var(--color-dark);
|
||||
background-color: var(--color-primary);
|
||||
font-weight: 700;
|
||||
|
||||
&:focus:not(:hover) {
|
||||
outline-color: var(--color-dark);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
|
@ -48,6 +48,11 @@ select {
|
||||
padding: .75rem 1.5rem;
|
||||
border-radius: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
box-shadow: var(--color-dark) 0 0 1.5px 1px;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
@ -55,6 +60,11 @@ textarea {
|
||||
}
|
||||
|
||||
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;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
|
@ -1,5 +1,5 @@
|
||||
.heading-permalink {
|
||||
color: var(--color-theme-primary-glare);
|
||||
color: var(--color-dark);
|
||||
font-size: .8em;
|
||||
margin-left: .3em;
|
||||
margin-top: .2em;
|
||||
|
@ -28,6 +28,10 @@
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
&__credit {
|
||||
|
@ -6,5 +6,9 @@
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
|
||||
&:focus {
|
||||
outline-color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -48,7 +48,7 @@ img {
|
||||
}
|
||||
|
||||
:focus {
|
||||
outline: 1px solid var(--color-theme-primary-glare);
|
||||
outline: 1px solid var(--color-dark);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user