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-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')};
|
||||||
|
@ -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 {
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
@ -28,6 +28,10 @@
|
|||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline-color: var(--color-white);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&__credit {
|
&__credit {
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user