fix: update focus styling

Redocly · Jul 13, 2020 · 30a27c1 · 30a27c1
1 parent 3d25005
commit 30a27c1
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 5 deletions.
diff --git a/src/common-elements/dropdown.ts b/src/common-elements/dropdown.ts
@@ -32,11 +32,12 @@ export const StyledDropdown = styled(Dropdown)`
     font-size: 0.929em;
     line-height: 1.5em;
     cursor: pointer;
+    transition: border 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
     &:hover,
     &:focus-within {
       border: 1px solid ${props => props.theme.colors.primary.main};
       color: ${props => props.theme.colors.primary.main};
-      box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12);
+      box-shadow: 0px 0px 0px 1px ${props => props.theme.colors.primary.main};
     }
     .dropdown-selector {
       display: inline-flex;
@@ -55,6 +56,7 @@ export const StyledDropdown = styled(Dropdown)`
       vertical-align: middle;
       color: #263238;
       left: 0;
+      transition: color 0.25s ease, text-shadow 0.25s ease;
     }
     .dropdown-arrow {
       position: absolute;
@@ -73,7 +75,7 @@ export const StyledDropdown = styled(Dropdown)`
     .dropdown-selector-content {
       position: absolute;
       margin-top: 2px;
-      left: -1px;
+      left: -2px;
       right: 0;
 
       z-index: 10;
@@ -90,7 +92,6 @@ export const StyledDropdown = styled(Dropdown)`
     .dropdown-option {
       font-size: 0.9em;
       color: #263238;
-      background-color: #fff;
       cursor: pointer;
       padding: 0.4em;
 
@@ -102,6 +103,10 @@ export const StyledDropdown = styled(Dropdown)`
         background-color: rgba(38, 50, 56, 0.12);
       }
     }
+    input {
+      cursor: pointer;
+      height: 1px;
+    }
   }
 `;
 
@@ -122,6 +127,7 @@ export const SimpleDropdown = styled(StyledDropdown)`
       box-shadow: none;
       .dropdown-selector-value {
         color: ${props => props.theme.colors.primary.main};
+        text-shadow: 0px 0px 0px ${props => props.theme.colors.primary.main};
       }
     }
   }

diff --git a/src/common-elements/linkify.tsx b/src/common-elements/linkify.tsx
@@ -14,6 +14,7 @@ export const linkifyMixin = className => css`
     line-height: 1;
     width: 20px;
     display: inline-block;
+    outline: 0;
   }
   ${className}:before {
     content: '';

diff --git a/src/common-elements/samples.tsx b/src/common-elements/samples.tsx
@@ -5,7 +5,9 @@ export const SampleControls = styled.div`
   opacity: 0.4;
   transition: opacity 0.3s ease;
   text-align: right;
-
+  &:focus-within {
+    opacity: 1;
+  }
   > button {
     background-color: transparent;
     border: 0;

diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts
@@ -33,6 +33,9 @@ export const Tabs = styled(ReactTabs)`
       &.react-tabs__tab--selected {
         color: ${props => props.theme.colors.text.primary};
         background: ${({ theme }) => theme.rightPanel.textColor};
+        &:focus {
+          outline: auto;
+        }
       }
 
       &:only-child {

diff --git a/src/components/Endpoint/styled.elements.ts b/src/components/Endpoint/styled.elements.ts
@@ -38,7 +38,7 @@ export const EndpointInfo = styled.button<{ expanded?: boolean; inverted?: boole
     color: ${props => (props.inverted ? props.theme.colors.text.primary : '#ffffff')}
   }
   &:focus {
-    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 2px 0 rgba(128, 128, 128, 0.15);
+    box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.45), 0 2px 0 rgba(128, 128, 128, 0.25);
   }
 `;
 

diff --git a/src/components/PayloadSamples/styled.elements.ts b/src/components/PayloadSamples/styled.elements.ts
@@ -42,6 +42,7 @@ export const InvertedSimpleDropdown = styled(StyledDropdown)`
     &:hover,
     &:focus-within {
       border: none;
+      box-shadow: none;
     }
     &:focus-within {
       background-color: ${({ theme }) => transparentize(0.3, theme.rightPanel.backgroundColor)};