💄 Update input slider thumb tracks size

Pushedskydiver · Oct 3, 2018 · ba7c2ff · ba7c2ff
1 parent 26d9a51
commit ba7c2ff
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/components/01-Atoms/Range/Range.styles.js b/src/components/01-Atoms/Range/Range.styles.js
@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { rgba } from '../../../styles/settings.colors.styles';
+import { minWidth } from '../../../styles/settings.breakpoints.styles';
 import spacing from '../../../styles/settings.spacing.styles';
 
 const Range = styled.input`
@@ -11,13 +12,20 @@ const Range = styled.input`
   border-radius: 20px;
 
   &::-webkit-slider-thumb {
-    width: 25px;
-    height: 25px;
+    width: 30px;
+    height: 30px;
     border-radius: 50%;
     cursor: pointer;
     appearance: none;
   }
 
+  ${minWidth('992', () => css`
+    &::-webkit-slider-thumb {
+      width: 25px;
+      height: 25px;
+    }
+  `)}
+
   ${props => props.color && css`
     background-color: ${rgba(props.color, 0.3)};
 

diff --git a/src/components/App.js b/src/components/App.js
@@ -182,7 +182,7 @@ class App extends Component {
 
         <Flex justify="between" align="center">
           <BlockDiv inputs color={colorState}>
-            <Label htmlFor="background">Background Hex Colour</Label>
+            <Label htmlFor="background">Background Colour</Label>
             <Input
               value={background}
               id="background"
@@ -201,7 +201,7 @@ class App extends Component {
           </BlockDiv>
 
           <BlockDiv inputs color={colorState}>
-            <Label htmlFor="foreground">Foreground Hex Colour</Label>
+            <Label htmlFor="foreground">Foreground Colour</Label>
             <Input
               value={foreground}
               id="foreground"