React Device Frameset

38 |

39 | {device === 'Galaxy Note 8' ?

40 |

41 |

: null} 42 | {device === 'iPhone X' ?

43 |

44 |

45 |

: null} 46 |

47 |

48 |

49 |

50 |

51 |

52 |

53 |

54 |

55 | {device === 'iPhone X' ?

56 |

57 |

58 |

59 |

60 |

: null} 61 |

62 |

63 | {children} 64 |

65 |

66 |

67 |

68 | ) 69 | } 70 | ); 71 | -------------------------------------------------------------------------------- /packages/react-device-frameset/src/DeviceOptions.ts: -------------------------------------------------------------------------------- 1 | import type { Compute, OptionField, OmitFieldByType } from './helper' 2 | 3 | type DeviceType = { 4 | device: Device, 5 | colors: Colors, 6 | hasLandscape: boolean, 7 | width?: number, 8 | height?: number, 9 | } 10 | 11 | export const defineDevice = < 12 | Device extends string, 13 | Colors extends readonly string[], 14 | Def extends DeviceType 15 | >(definition: Def) => definition 16 | 17 | export const DeviceOptions = { 18 | ['iPhone X']: defineDevice({ 19 | device: 'iphone-x', 20 | colors: [] as const, 21 | hasLandscape: true, 22 | width: 375, 23 | height: 812, 24 | }), 25 | ['iPhone 8']: defineDevice({ 26 | device: 'iphone8', 27 | colors: ['black', 'silver', 'gold'] as const, 28 | hasLandscape: true, 29 | width: 375, 30 | height: 667, 31 | }), 32 | ['iPhone 8 Plus']: defineDevice({ 33 | device: 'iphone8plus', 34 | colors: ['black', 'silver', 'gold'] as const, 35 | hasLandscape: true, 36 | width: 414, 37 | height: 736, 38 | }), 39 | ['iPhone 5s']: defineDevice({ 40 | device: 'iphone5s', 41 | colors: ['black', 'silver', 'gold'] as const, 42 | hasLandscape: true, 43 | width: 320, 44 | height: 568, 45 | }), 46 | ['iPhone 5c']: defineDevice({ 47 | device: 'iphone5c', 48 | colors: ['white', 'red', 'yellow', 'green', 'blue'] as const, 49 | hasLandscape: true, 50 | width: 320, 51 | height: 568, 52 | }), 53 | ['iPhone 4s']: defineDevice({ 54 | device: 'iphone4s', 55 | colors: ['black', 'silver'] as const, 56 | hasLandscape: true, 57 | width: 320, 58 | height: 480, 59 | }), 60 | ['Galaxy Note 8']: defineDevice({ 61 | device: 'note8', 62 | colors: [] as const, 63 | hasLandscape: true, 64 | width: 400, 65 | height: 822, 66 | }), 67 | ['Nexus 5']: defineDevice({ 68 | device: 'nexus5', 69 | colors: [] as const, 70 | hasLandscape: true, 71 | width: 320, 72 | height: 568, 73 | }), 74 | ['Lumia 920']: defineDevice({ 75 | device: 'lumia920', 76 | colors: ['black', 'white', 'yellow', 'red', 'blue'] as const, 77 | hasLandscape: true, 78 | width: 320, 79 | height: 533, 80 | }), 81 | ['Samsung Galaxy S5']: defineDevice({ 82 | device: 's5', 83 | colors: ['white', 'black'] as const, 84 | hasLandscape: true, 85 | width: 320, 86 | height: 568, 87 | }), 88 | ['HTC One']: defineDevice({ 89 | device: 'nexus5', 90 | colors: [] as const, 91 | hasLandscape: true, 92 | width: 320, 93 | height: 568, 94 | }), 95 | ['iPad Mini']: defineDevice({ 96 | device: 'ipad', 97 | colors: ['black', 'silver'] as const, 98 | hasLandscape: true, 99 | width: 576, 100 | height: 768, 101 | }), 102 | ['MacBook Pro']: defineDevice({ 103 | device: 'macbook', 104 | colors: [] as const, 105 | hasLandscape: false, 106 | width: 960, 107 | height: 600, 108 | }), 109 | } 110 | 111 | export type DeviceName = keyof typeof DeviceOptions 112 | 113 | export const DeviceNames = Object.keys(DeviceOptions) as DeviceName[] 114 | 115 | type DevicesType>> = { 116 | [key in keyof R]: Compute>> 124 | }[keyof R] 125 | 126 | export type DeviceFramesetProps = DevicesType & React.HTMLAttributes 127 | -------------------------------------------------------------------------------- /packages/react-device-frameset/scss/device-selector.scss: -------------------------------------------------------------------------------- 1 | .device-selector { 2 | margin-top: 40px; 3 | overflow: hidden; 4 | } 5 | 6 | .device-selector-container { 7 | display: flex; 8 | justify-content: center; 9 | padding: 20px 0; 10 | } 11 | 12 | .device-selector dl { 13 | display: grid; 14 | grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 15 | grid-template-rows: repeat(auto-fill, 1fr); 16 | gap: 10px; 17 | } 18 | 19 | .device-selector dl dt { 20 | font-size: 20px; 21 | font-weight: 600; 22 | letter-spacing: 0; 23 | font-style: normal; 24 | padding: 10px 0; 25 | grid-column: 1 / -1; 26 | display: flex; 27 | justify-content: space-between; 28 | } 29 | 30 | .device-selector dl dd { 31 | padding: 0; 32 | margin: 0; 33 | position: relative; 34 | cursor: pointer; 35 | text-align: left; 36 | flex-shrink: 0; 37 | flex-grow: 1; 38 | } 39 | 40 | .device-selector dl dd input { 41 | position: absolute; 42 | width: 100%; 43 | height: 100%; 44 | appearance: none; 45 | top: 0; 46 | z-index: -1; 47 | } 48 | .device-selector dl dd label { 49 | display: grid; 50 | grid-template-columns: 1fr 1fr; 51 | width: 100%; 52 | height: 100%; 53 | padding: 20px; 54 | text-align: center; 55 | border: 2px solid #d6d6d6; 56 | box-sizing: border-box; 57 | border-spacing: 0; 58 | overflow: hidden; 59 | cursor: pointer; 60 | background-color: hsla(0,0%,100%,.8); 61 | flex-direction: column; 62 | cursor: pointer; 63 | transition: all 0.5s ease; 64 | } 65 | .device-selector dl dd.active label, .device-selector dl dd.hover label { 66 | border-color: #0070c9; 67 | } 68 | 69 | .device-selector dl dd label span, .device-selector dl dt span { 70 | display: flex; 71 | align-items: center; 72 | justify-content: center; 73 | color: black; 74 | background: #e9ecef; 75 | font-size: 12px; 76 | text-transform: uppercase; 77 | font-weight: 600; 78 | letter-spacing: 2px; 79 | padding: 10px 20px; 80 | border-radius: 30px; 81 | cursor: pointer; 82 | text-transform: uppercase; 83 | transition: all 0.5s ease; 84 | opacity: 0.8; 85 | transform: scale(0.8); 86 | } 87 | .device-selector dl dd label span.active, .device-selector dl dt span.active { 88 | opacity: 1; 89 | transform: scale(1); 90 | } 91 | .device-selector dl dd label div { 92 | display: flex; 93 | flex-direction: column; 94 | align-items: center; 95 | } 96 | .device-selector dl dd label div p { 97 | font-weight: 600; 98 | font-size: 17px; 99 | } 100 | .device-selector dl dd label ul { 101 | display: flex; 102 | flex-direction: row; 103 | flex-wrap: wrap; 104 | list-style: none; 105 | justify-content: flex-start; 106 | } 107 | .device-selector dl dd label ul li { 108 | display: block; 109 | height: 24px; 110 | width: 24px; 111 | margin: 0 8px 8px 0; 112 | border-radius: 50%; 113 | transition: all 0.5s ease; 114 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); 115 | transform: scale(0.8); 116 | } 117 | .device-selector dl dd label ul li.active { 118 | box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3); 119 | transform: scale(1); 120 | } 121 | .device-selector dl dd label ul li.black { 122 | background-color: #2c2b2c; 123 | } 124 | .device-selector dl dd label ul li.silver { 125 | background-color: #f0f0f0; 126 | } 127 | .device-selector dl dd label ul li.gold { 128 | background-color: #f1e2d0; 129 | } 130 | .device-selector dl dd label ul li.white { 131 | background-color: #fff; 132 | } 133 | .device-selector dl dd label ul li.red { 134 | background-color: #f96b6c; 135 | } 136 | .device-selector dl dd label ul li.yellow { 137 | background-color: #f2dc60; 138 | } 139 | .device-selector dl dd label ul li.green { 140 | background-color: #97e563; 141 | } 142 | .device-selector dl dd label ul li.blue { 143 | background-color: #33a2db; 144 | } 145 | -------------------------------------------------------------------------------- /packages/react-device-frameset/src/Zoomable.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useMemo, useState } from 'react' 2 | 3 | export type ZoomableType = React.DetailedHTMLProps< 4 | React.HTMLAttributes, 5 | HTMLDivElement 6 | > 7 | 8 | const steps = [ 9 | 0, 10 | 1 / 4, 11 | 1 / 3, 12 | 1 / 2, 13 | 2 / 3, 14 | 3 / 4, 15 | 4 / 5, 16 | 9 / 10, 17 | 1, 18 | 11 / 10, 19 | 5 / 4, 20 | 3 / 2, 21 | 7 / 4, 22 | 2 / 1, 23 | 5 / 2, 24 | 3 / 1, 25 | 4 / 1, 26 | 5 / 1, 27 | Infinity, 28 | ] 29 | const toCurrIndex = (value: number) => 30 | steps.findIndex((step) => step > value) - 1 31 | const toPrevIndex = (value: number) => 32 | steps.findIndex((step) => step > value) - 2 33 | const toNextIndex = (value: number) => steps.findIndex((step) => step > value) 34 | const checkReachBound = (value: number) => { 35 | if (value === steps[0]) return steps[1] 36 | if (value === steps[steps.length - 1]) return steps[steps.length - 2] 37 | 38 | return value 39 | } 40 | const toCurr = (value: number) => { 41 | return checkReachBound(steps[toCurrIndex(value)]) 42 | } 43 | const toPrev = (value: number) => { 44 | return checkReachBound(steps[toPrevIndex(value)]) 45 | } 46 | const toNext = (value: number) => { 47 | return checkReachBound(steps[toNextIndex(value)]) 48 | } 49 | 50 | export const Zoomable = React.memo(function Zoomable({ 51 | children, 52 | ...props 53 | }) { 54 | const [[width, height], setSize] = useState([1, 1]) 55 | const [[clientWidth, clientHeight], setClientSize] = useState([width, height]) 56 | const [container, setContainer] = useState(null) 57 | const [zoomContainer, setZoomContainer] = useState( 58 | null 59 | ) 60 | const scale = useMemo(() => { 61 | const [scaleX, scaleY] = [width / clientWidth, height / clientHeight] 62 | 63 | return Math.min(scaleX, scaleY, 1) 64 | }, [width, height, clientWidth, clientHeight]) 65 | 66 | const [localScale, setLocaleScale] = useState(null) 67 | 68 | const realScale = useMemo( 69 | () => toCurr(localScale ?? scale), 70 | [localScale, scale] 71 | ) 72 | 73 | const allowScroll = useMemo( 74 | () => clientWidth / realScale < width || clientHeight / realScale < height, 75 | [clientHeight, clientWidth, realScale, width, height] 76 | ) 77 | 78 | const transformStyle = useMemo(() => { 79 | return { transform: `scale(${realScale})` } 80 | }, [realScale]) 81 | 82 | useEffect(() => { 83 | if (zoomContainer) { 84 | const syncClientSize = (el: Element) => { 85 | const { clientWidth, clientHeight } = el 86 | clientWidth && 87 | clientHeight && 88 | setClientSize([clientWidth, clientHeight]) 89 | } 90 | 91 | syncClientSize(zoomContainer) 92 | 93 | const option: ResizeObserverOptions = {} 94 | 95 | const observe: ResizeObserverCallback = (entries) => { 96 | for (const entry of entries) { 97 | syncClientSize(entry.target) 98 | } 99 | } 100 | 101 | const observer = new ResizeObserver(observe) 102 | 103 | observer.observe(zoomContainer, option) 104 | 105 | return () => observer.disconnect() 106 | } 107 | }, [zoomContainer]) 108 | useEffect(() => { 109 | if (container) { 110 | const { clientWidth, clientHeight } = container 111 | setSize([clientWidth, clientHeight]) 112 | } 113 | }, [container]) 114 | 115 | return ( 116 |

117 |

128 |

132 | {children} 133 |

134 |

135 |

136 | setLocaleScale(toPrev(realScale))}>- 137 | {Math.round(realScale * 100)}% 138 | setLocaleScale(toNext(realScale))}>+ 139 |

140 |

141 | ) 142 | }) 143 | -------------------------------------------------------------------------------- /packages/react-device-frameset/src/DeviceEmulator.tsx: -------------------------------------------------------------------------------- 1 | import React, { useCallback, useEffect, useMemo, useState } from 'react' 2 | import { DeviceOptions, DeviceFramesetProps } from './DeviceFrameset' 3 | import { DeviceName, DeviceNames } from './DeviceOptions' 4 | 5 | export type DeviceEmulatorProps = React.HTMLAttributes & { 6 | banDevices?: DeviceName[] 7 | children: (props: DeviceFramesetProps) => React.ReactNode, 8 | value?: DeviceFramesetProps, 9 | onChange?: (deviceConfig: DeviceFramesetProps) => void, 10 | } 11 | 12 | const zooms = [ 13 | 0.5, 0.75, 1, 1.25, 1.5 14 | ] 15 | 16 | export const DeviceEmulator = React.memo(function DeviceEmulator ({ children, value, onChange, banDevices = [], ...divProps }) { 17 | const deviceNames = useMemo(() => DeviceNames.filter(devName => !banDevices.includes(devName)), [banDevices]) 18 | const [deviceName, setDeviceName] = useState(deviceNames[0] ?? '') 19 | 20 | const selectedDeviceName = useMemo(() => value?.device ?? deviceName, [value, deviceName]) 21 | 22 | const handleSelectChange = useCallback( 23 | (event: React.ChangeEvent) => { 24 | const newDeviceName = event.target.value as DeviceName 25 | if (!deviceNames.includes(newDeviceName)) throw new Error(`Invalid device name for ${newDeviceName}`) 26 | 27 | setDeviceName(newDeviceName) 28 | }, 29 | [deviceNames], 30 | ) 31 | 32 | const [selectedZoom, setSelectedZoom] = useState(zooms[2]) 33 | 34 | const handleSelectZoomChange = useCallback( 35 | (event: React.ChangeEvent) => { 36 | const newZoom = +event.target.value 37 | if (!zooms.includes(newZoom)) throw new Error(`Invalid device zoom for ${newZoom}`) 38 | 39 | setSelectedZoom(newZoom) 40 | }, 41 | [], 42 | ) 43 | 44 | const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[selectedDeviceName], [selectedDeviceName]) 45 | 46 | const firstColor = useMemo(() => colors[0], [colors]) 47 | 48 | const [isLandscape, setIsLandscape] = useState(undefined) 49 | 50 | const isLandscapeChecked = useMemo(() => hasLandscape ? isLandscape : undefined, [hasLandscape, isLandscape]) 51 | 52 | const handleIsLandscapeChange = useCallback( 53 | () => { 54 | if (!hasLandscape) return 55 | 56 | setIsLandscape(is => !is) 57 | }, 58 | [hasLandscape] 59 | ) 60 | 61 | const deviceFramesetProps = useMemo( 62 | () => value ?? ({ 63 | device: selectedDeviceName, 64 | color: firstColor, 65 | landscape: isLandscapeChecked, 66 | width, 67 | height, 68 | zoom: selectedZoom, 69 | }) as DeviceFramesetProps, 70 | [value, selectedDeviceName, firstColor, isLandscapeChecked, width, height, selectedZoom], 71 | ) 72 | 73 | useEffect( 74 | () => { 75 | onChange?.(deviceFramesetProps) 76 | }, 77 | [onChange, deviceFramesetProps] 78 | ) 79 | 80 | return ( 81 |

82 |

83 | 91 | 92 | x 93 | 94 | 102 | Landscape: 103 | 104 |

105 | 106 |

107 | {children(deviceFramesetProps)} 108 |

109 |

110 | ) 111 | }) 112 | -------------------------------------------------------------------------------- /packages/react-device-frameset-example/pages/zommable$.tsx: -------------------------------------------------------------------------------- 1 | /** 2 | * @title Zoomable 3 | * @order 3 4 | */ 5 | 6 | import { Zoomable } from 'react-device-frameset' 7 | 8 | const Demo = () => ( 9 |

10 | 11 |

21 | width: 300, height: 400 22 |

23 | 24 | 25 |

35 | width: 305, height: 405 36 |

37 | 38 | 39 |

49 | width: 150, height: 200 50 |

51 | 52 | 53 |

63 | width: 600, height: 800 64 |

65 | 66 | 67 |

77 | width: 200, height: 800 78 |

79 | 80 | 81 |

91 | width: 300, height: 800 92 |

93 | 94 | 95 |

105 | width: 200, height: 200 106 |

107 | 108 | 109 |

119 | width: 400, height: 800 120 |

121 | 122 | 123 |

133 | width: 300, height: 200 134 |

135 | 136 | 137 |

147 | width: 400, height: 200 148 |

149 | 150 | 151 |

161 | width: 600, height: 800 162 |

163 | 164 | 165 |

175 | width: 605, height: 805 176 |

177 | 178 | 179 |

189 | width: 595, height: 795 190 |

191 | 192 |

193 | ) 194 | 195 | export default Demo 196 | -------------------------------------------------------------------------------- /packages/react-device-frameset/src/DeviceSelector.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useMemo, useState, useCallback } from 'react' 2 | import { DeviceOptions, DeviceFramesetProps } from './DeviceFrameset' 3 | import { DeviceName, DeviceNames } from './DeviceOptions' 4 | 5 | export type DeviceSelectorProps = React.HTMLAttributes & { 6 | banDevices?: DeviceName[], 7 | children: (props: DeviceFramesetProps) => React.ReactNode, 8 | value?: DeviceName, 9 | onChange?: (deviceName: DeviceName) => void, 10 | } 11 | 12 | export const DeviceSelector = React.memo(function DeviceSelector ({ children, value, onChange, banDevices = [], ...divProps }) { 13 | const deviceNames = useMemo(() => DeviceNames.filter(devName => !banDevices.includes(devName)), [banDevices]) 14 | const [deviceName, setDeviceName] = useState(deviceNames[0] ?? '') 15 | const selectedDeviceName = useMemo(() => value ?? deviceName, [value, deviceName]) 16 | 17 | const handleSelectChange = useCallback( 18 | (event: React.MouseEvent) => { 19 | 20 | const newDeviceName = event.currentTarget.dataset['deviceName'] as DeviceName 21 | if (!deviceNames.includes(newDeviceName)) throw new Error(`Invalid device name for ${newDeviceName}`) 22 | 23 | onChange?.(newDeviceName) 24 | setDeviceName(newDeviceName) 25 | }, 26 | [deviceNames, onChange], 27 | ) 28 | 29 | const [showMenu, setShowMenu] = useState(true) 30 | 31 | const { colors, hasLandscape, width, height } = useMemo(() => DeviceOptions[selectedDeviceName], [selectedDeviceName]) 32 | 33 | const firstColor = useMemo(() => colors[0], [colors]) 34 | 35 | const [selectedColor, setSelectedColor] = useState(firstColor) 36 | 37 | const handleColorChange = useCallback( 38 | (event: React.MouseEvent) => { 39 | 40 | const newDeviceColor = event.currentTarget.dataset['deviceColor'] as typeof colors[number] 41 | 42 | setSelectedColor(newDeviceColor) 43 | }, 44 | [], 45 | ) 46 | 47 | useEffect(() => { setSelectedColor(firstColor) }, [firstColor]) 48 | 49 | const [isLandscape, setIsLandscape] = useState(undefined) 50 | 51 | const isLandscapeChecked = useMemo(() => hasLandscape ? isLandscape : undefined, [hasLandscape, isLandscape]) 52 | 53 | const handleIsLandscapeChange = useCallback( 54 | () => { 55 | if (!hasLandscape) return 56 | 57 | setIsLandscape(is => !is) 58 | }, 59 | [hasLandscape] 60 | ) 61 | 62 | const deviceFramesetProps = useMemo( 63 | () => ({ 64 | device: selectedDeviceName, 65 | color: selectedColor, 66 | landscape: isLandscapeChecked, 67 | width, 68 | height, 69 | }) as DeviceFramesetProps, 70 | [selectedDeviceName, selectedColor, isLandscapeChecked, width, height], 71 | ) 72 | 73 | return ( 74 |

75 |

77 | The Chosen: {selectedDeviceName} 78 | setShowMenu(is => !is)} 81 | > 82 | show all devices 83 | 84 |

92 | 93 | 94 |

95 |

{devName}

96 | {DeviceOptions[devName].hasLandscape && ( 97 | 101 | landscape 102 | 103 | )} 104 |

105 |

115 | ) 116 | )} 117 |

118 | 119 |

122 | 123 |

124 | {children(deviceFramesetProps)} 125 |

126 |

127 | ) 128 | }) -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Device Frameset 2 | 3 | [![NPM](https://nodei.co/npm/react-device-frameset.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-device-frameset/) 4 | 5 | ![publish workflow](https://github.com/zheeeng/react-device-frameset/actions/workflows/publish.yml/badge.svg) 6 | ![pages workflow](https://github.com/zheeeng/react-device-frameset/actions/workflows/pages.yml/badge.svg) 7 | [![npm version](https://img.shields.io/npm/v/react-device-frameset.svg)](https://www.npmjs.com/package/react-device-frameset) 8 | 9 | This is yet another device frameset component for React. 10 | 11 | ## [Demo](https://react-device-frameset.zheeeng.me) 12 | 13 | ## Features 14 | 15 | * Powered by pure css device prototype showcase [Marvel Devices.css](http://marvelapp.github.io/devices.css/) 16 | * [![language](https://img.shields.io/badge/%3C%2F%3E-TypeScript-blue.svg)](http://typescriptlang.org/) Type Safe and under maintainable 17 | * Sample for reference 18 | 19 | * Device Selector 20 | ![frameset-screenshot](https://user-images.githubusercontent.com/1303154/120062053-a58a6200-c092-11eb-9fec-fa0dd3609645.png) 21 | 22 | * Device Emulator 23 | ![frameset-screenshot](https://user-images.githubusercontent.com/1303154/132490604-f6d05da8-835d-437f-9b10-5ffec76e661f.png) 24 | 25 | ## Installation 26 | 27 | ```bash 28 | yarn add react-device-frameset (or npm/pnpm) 29 | ``` 30 | 31 | ## Usage 32 | 33 | ### Stylesheet importing 34 | 35 | `react-device-frameset` supports [conditional exports](https://nodejs.org/api/packages.html#conditional-exports). 36 | 37 | If the application bundler supports this feature and above node v12.11.0, you can import the stylesheet through the recommended path `react-device-frameset/styles`, it is largely supported in real developing environments, otherwise, you need to import it from `react-device-frameset/dist/styles`. 38 | 39 | ### Basic Example 40 | 41 | ```tsx 42 | import { DeviceFrameset } from 'react-device-frameset' 43 | import 'react-device-frameset/styles/marvel-devices.min.css' 44 | 45 | export const App = () => { 46 | return ( 47 | 48 |

Hello world

49 | 50 | ) 51 | } 52 | ``` 53 | 54 | ### Props Signature 55 | 56 | DeviceFramesetProps: 57 | 58 | ```ts (signature) 59 | | { device: 'iPhone X', landscape?: boolean, width?: number, height?: number, zoom?: number } 60 | | { device: 'iPhone 8', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number } 61 | | { device: 'iPhone 8 Plus', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number } 62 | | { device: 'iPhone 5s', color: 'black' | 'silver' | 'gold', landscape?: boolean, width?: number, height?: number, zoom?: number } 63 | | { device: 'iPhone 5c', color: 'white' | 'red' | 'yellow' | 'green' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number } 64 | | { device: 'iPhone 4s', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number } 65 | | { device: 'Galaxy Note 8', landscape?: boolean, width?: number, height?: number, zoom?: number } 66 | | { device: 'Nexus 5', landscape?: boolean, width?: number, height?: number, zoom?: number } 67 | | { device: 'Lumia 920', color: 'black' | 'white' | 'yellow' | 'red' | 'blue', landscape?: boolean, width?: number, height?: number, zoom?: number } 68 | | { device: 'Samsung Galaxy S5', color: 'white' | 'black', landscape?: boolean, width?: number, height?: number, zoom?: number } 69 | | { device: 'HTC One', landscape?: boolean, width?: number, height?: number, zoom?: number } 70 | | { device: 'iPad Mini', color: 'black' | 'silver', landscape?: boolean, width?: number, height?: number, zoom?: number } 71 | | { device: 'MacBook Pro', width?: number, height?: number, zoom?: number } 72 | ``` 73 | 74 | ## If you like the frameset selector? 75 | 76 | ```ts (signature) 77 | type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro" 78 | 79 | type DeviceEmulatorProps = { 80 | banDevices?: DeviceName[] 81 | children: (props: DeviceFramesetProps) => React.ReactNode, 82 | value?: DeviceName, 83 | onChange?: (deviceName: DeviceName) => void, 84 | } 85 | ``` 86 | 87 | ```tsx 88 | import { DeviceFrameset, DeviceSelector } from 'react-device-frameset' 89 | import 'react-device-frameset/styles/marvel-devices.min.css' 90 | import 'react-device-frameset/styles/device-selector.min.css' 91 | 92 | export const App = () => { 93 | return ( 94 | 95 | {props => } 96 | 97 | ) 98 | } 99 | ``` 100 | 101 | ## If you like the frameset emulator? 102 | 103 | ```ts (signature) 104 | type DeviceName = "iPhone X" | "iPhone 8" | "iPhone 8 Plus" | "iPhone 5s" | "iPhone 5c" | "iPhone 4s" | "Galaxy Note 8" | "Nexus 5" | "Lumia 920" | "Samsung Galaxy S5" | "HTC One" | "iPad Mini" | "MacBook Pro" 105 | 106 | type DeviceEmulatorProps = { 107 | banDevices?: DeviceName[] 108 | children: (props: DeviceFramesetProps) => React.ReactNode, 109 | value?: DeviceFramesetProps, 110 | onChange?: (deviceConfig: DeviceFramesetProps) => void, 111 | } 112 | ``` 113 | 114 | ```tsx 115 | import { DeviceFrameset, DeviceEmulator } from 'react-device-frameset' 116 | import 'react-device-frameset/styles/marvel-devices.min.css' 117 | import 'react-device-frameset/styles/device-emulator.min.css' 118 | 119 | export const App = () => { 120 | return ( 121 | 122 | {props => } 123 | 124 | ) 125 | } 126 | ``` 127 | -------------------------------------------------------------------------------- /packages/react-device-frameset/scss/marvel-devices.scss: -------------------------------------------------------------------------------- 1 | .marvel-device{ 2 | display: inline-block; 3 | position: relative; 4 | box-sizing: content-box !important; 5 | transition: all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275); 6 | 7 | .screen { 8 | width: 100%; 9 | position: relative; 10 | height: 100%; 11 | z-index: 3; 12 | background: white; 13 | overflow: hidden; 14 | display: block; 15 | border-radius: 1px; 16 | box-shadow: 0 0 0 3px #111; 17 | } 18 | 19 | .top-bar, .bottom-bar { 20 | height: 3px; 21 | background: black; 22 | width: 100%; 23 | display: block; 24 | } 25 | 26 | .middle-bar { 27 | width: 3px; 28 | height: 4px; 29 | top: 0px; 30 | left: 90px; 31 | background: black; 32 | position: absolute; 33 | } 34 | 35 | &.iphone8{ 36 | width: 375px; 37 | height: 667px; 38 | padding: 105px 24px; 39 | background: #d9dbdc; 40 | border-radius: 56px; 41 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2); 42 | 43 | &:before{ 44 | width: calc(100% - 12px); 45 | height: calc(100% - 12px); 46 | position: absolute; 47 | top: 6px; 48 | content: ''; 49 | left: 6px; 50 | border-radius: 50px; 51 | background: #f8f8f8; 52 | z-index: 1; 53 | } 54 | 55 | &:after{ 56 | width: calc(100% - 16px); 57 | height: calc(100% - 16px); 58 | position: absolute; 59 | top: 8px; 60 | content: ''; 61 | left: 8px; 62 | border-radius: 48px; 63 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 64 | inset 0 0 6px 3px #FFFFFF; 65 | z-index: 2; 66 | } 67 | 68 | .home { 69 | border-radius: 100%; 70 | width: 68px; 71 | height: 68px; 72 | position: absolute; 73 | left: 50%; 74 | margin-left: -34px; 75 | bottom: 22px; 76 | z-index: 3; 77 | background: rgb(48,50,51); 78 | background: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%); 79 | 80 | &:before{ 81 | background: #f8f8f8; 82 | position: absolute; 83 | content: ''; 84 | border-radius: 100%; 85 | width: calc(100% - 8px); 86 | height: calc(100% - 8px); 87 | top: 4px; 88 | left: 4px; 89 | } 90 | } 91 | 92 | .top-bar{ 93 | height: 14px; 94 | background: #bfbfc0; 95 | position: absolute; 96 | top: 68px; 97 | left: 0; 98 | } 99 | 100 | .bottom-bar{ 101 | height: 14px; 102 | background: #bfbfc0; 103 | position: absolute; 104 | bottom: 68px; 105 | left: 0; 106 | } 107 | 108 | .sleep{ 109 | position: absolute; 110 | top: 190px; 111 | right: -4px; 112 | width: 4px; 113 | height: 66px; 114 | border-radius: 0px 2px 2px 0px; 115 | background: #d9dbdc; 116 | } 117 | 118 | .volume{ 119 | position: absolute; 120 | left: -4px; 121 | top: 188px; 122 | z-index: 0; 123 | height: 66px; 124 | width: 4px; 125 | border-radius: 2px 0px 0px 2px; 126 | background: #d9dbdc; 127 | 128 | &:before { 129 | position: absolute; 130 | left: 2px; 131 | top: -78px; 132 | height: 40px; 133 | width: 2px; 134 | border-radius: 2px 0px 0px 2px; 135 | background: inherit; 136 | content: ''; 137 | display: block; 138 | } 139 | 140 | &:after { 141 | position: absolute; 142 | left: 0px; 143 | top: 82px; 144 | height: 66px; 145 | width: 4px; 146 | border-radius: 2px 0px 0px 2px; 147 | background: inherit; 148 | content: ''; 149 | display: block; 150 | } 151 | } 152 | 153 | .camera { 154 | background: #3c3d3d; 155 | width: 12px; 156 | height: 12px; 157 | position: absolute; 158 | top: 24px; 159 | left: 50%; 160 | margin-left: -6px; 161 | border-radius: 100%; 162 | z-index: 3; 163 | } 164 | 165 | .sensor { 166 | background: #3c3d3d; 167 | width: 16px; 168 | height: 16px; 169 | position: absolute; 170 | top: 49px; 171 | left: 134px; 172 | z-index: 3; 173 | border-radius: 100%; 174 | } 175 | 176 | .speaker { 177 | background: #292728; 178 | width: 70px; 179 | height: 6px; 180 | position: absolute; 181 | top: 54px; 182 | left: 50%; 183 | margin-left: -35px; 184 | border-radius: 6px; 185 | z-index: 3; 186 | } 187 | 188 | &.gold{ 189 | background: #f9e7d3; 190 | 191 | .top-bar, .bottom-bar{ 192 | background: white; 193 | } 194 | 195 | .sleep, .volume{ 196 | background: #f9e7d3; 197 | } 198 | 199 | .home{ 200 | background: rgb(206,187,169); 201 | background: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%); 202 | } 203 | } 204 | 205 | &.black{ 206 | background: #464646; 207 | box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.7); 208 | 209 | &:before{ 210 | background: #080808; 211 | } 212 | 213 | &:after{ 214 | box-shadow: 215 | inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 216 | inset 0 0 6px 3px #212121; 217 | } 218 | 219 | .top-bar, .bottom-bar{ 220 | background: #212121; 221 | } 222 | 223 | .volume, .sleep{ 224 | background: #464646; 225 | } 226 | 227 | .camera{ 228 | background: #080808; 229 | } 230 | 231 | .home{ 232 | background: rgb(8,8,8); 233 | background: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%); 234 | 235 | &:before{ 236 | background: #080808; 237 | } 238 | } 239 | 240 | } 241 | 242 | &.landscape{ 243 | padding: 24px 105px; 244 | height: 375px; 245 | width: 667px; 246 | 247 | .sleep{ 248 | top: 100%; 249 | border-radius: 0px 0px 2px 2px; 250 | right: 190px; 251 | height: 4px; 252 | width: 66px; 253 | } 254 | 255 | .volume { 256 | width: 66px; 257 | height: 4px; 258 | top: -4px; 259 | left: calc(100% - 188px - 66px); 260 | border-radius: 2px 2px 0px 0px; 261 | 262 | &:before { 263 | width: 40px; 264 | height: 2px; 265 | top: 2px; 266 | right: -78px; 267 | left: auto; 268 | border-radius: 2px 2px 0px 0px; 269 | } 270 | 271 | &:after{ 272 | left: -82px; 273 | width: 66px; 274 | height: 4px; 275 | top: 0; 276 | border-radius: 2px 2px 0px 0px; 277 | } 278 | } 279 | 280 | .top-bar{ 281 | width: 14px; 282 | height: 100%; 283 | left: calc(100% - 68px - 14px); 284 | top: 0; 285 | } 286 | 287 | .bottom-bar{ 288 | width: 14px; 289 | height: 100%; 290 | left: 68px; 291 | top: 0; 292 | } 293 | 294 | .home{ 295 | top: 50%; 296 | margin-top: -34px; 297 | margin-left: 0; 298 | left: 22px; 299 | } 300 | 301 | .sensor { 302 | top: 134px; 303 | left: calc(100% - 49px - 16px); 304 | } 305 | 306 | .speaker { 307 | height: 70px; 308 | width: 6px; 309 | left: calc(100% - 54px - 6px); 310 | top: 50%; 311 | margin-left: 0px; 312 | margin-top: -35px; 313 | } 314 | 315 | .camera { 316 | left: calc(100% - 32px); 317 | top: 50%; 318 | margin-left: 0px; 319 | margin-top: -5px; 320 | } 321 | } 322 | } 323 | 324 | &.iphone8plus{ 325 | width: 414px; 326 | height: 736px; 327 | padding: 112px 26px; 328 | background: #d9dbdc; 329 | border-radius: 56px; 330 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.2); 331 | 332 | &:before{ 333 | width: calc(100% - 12px); 334 | height: calc(100% - 12px); 335 | position: absolute; 336 | top: 6px; 337 | content: ''; 338 | left: 6px; 339 | border-radius: 50px; 340 | background: #f8f8f8; 341 | z-index: 1; 342 | } 343 | 344 | &:after{ 345 | width: calc(100% - 16px); 346 | height: calc(100% - 16px); 347 | position: absolute; 348 | top: 8px; 349 | content: ''; 350 | left: 8px; 351 | border-radius: 48px; 352 | box-shadow: inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 353 | inset 0 0 6px 3px #FFFFFF; 354 | z-index: 2; 355 | } 356 | 357 | .home { 358 | border-radius: 100%; 359 | width: 68px; 360 | height: 68px; 361 | position: absolute; 362 | left: 50%; 363 | margin-left: -34px; 364 | bottom: 24px; 365 | z-index: 3; 366 | background: rgb(48,50,51); 367 | background: linear-gradient(135deg, rgba(48,50,51,1) 0%,rgba(181,183,185,1) 50%,rgba(240,242,242,1) 69%,rgba(48,50,51,1) 100%); 368 | 369 | &:before{ 370 | background: #f8f8f8; 371 | position: absolute; 372 | content: ''; 373 | border-radius: 100%; 374 | width: calc(100% - 8px); 375 | height: calc(100% - 8px); 376 | top: 4px; 377 | left: 4px; 378 | } 379 | } 380 | 381 | .top-bar{ 382 | height: 14px; 383 | background: #bfbfc0; 384 | position: absolute; 385 | top: 68px; 386 | left: 0; 387 | } 388 | 389 | .bottom-bar{ 390 | height: 14px; 391 | background: #bfbfc0; 392 | position: absolute; 393 | bottom: 68px; 394 | left: 0; 395 | } 396 | 397 | .sleep{ 398 | position: absolute; 399 | top: 190px; 400 | right: -4px; 401 | width: 4px; 402 | height: 66px; 403 | border-radius: 0px 2px 2px 0px; 404 | background: #d9dbdc; 405 | } 406 | 407 | .volume{ 408 | position: absolute; 409 | left: -4px; 410 | top: 188px; 411 | z-index: 0; 412 | height: 66px; 413 | width: 4px; 414 | border-radius: 2px 0px 0px 2px; 415 | background: #d9dbdc; 416 | 417 | &:before { 418 | position: absolute; 419 | left: 2px; 420 | top: -78px; 421 | height: 40px; 422 | width: 2px; 423 | border-radius: 2px 0px 0px 2px; 424 | background: inherit; 425 | content: ''; 426 | display: block; 427 | } 428 | 429 | &:after { 430 | position: absolute; 431 | left: 0px; 432 | top: 82px; 433 | height: 66px; 434 | width: 4px; 435 | border-radius: 2px 0px 0px 2px; 436 | background: inherit; 437 | content: ''; 438 | display: block; 439 | } 440 | } 441 | 442 | .camera { 443 | background: #3c3d3d; 444 | width: 12px; 445 | height: 12px; 446 | position: absolute; 447 | top: 29px; 448 | left: 50%; 449 | margin-left: -6px; 450 | border-radius: 100%; 451 | z-index: 3; 452 | } 453 | 454 | .sensor { 455 | background: #3c3d3d; 456 | width: 16px; 457 | height: 16px; 458 | position: absolute; 459 | top: 54px; 460 | left: 154px; 461 | z-index: 3; 462 | border-radius: 100%; 463 | } 464 | 465 | .speaker { 466 | background: #292728; 467 | width: 70px; 468 | height: 6px; 469 | position: absolute; 470 | top: 59px; 471 | left: 50%; 472 | margin-left: -35px; 473 | border-radius: 6px; 474 | z-index: 3; 475 | } 476 | 477 | &.gold{ 478 | background: #f9e7d3; 479 | 480 | .top-bar, .bottom-bar{ 481 | background: white; 482 | } 483 | 484 | .sleep, .volume{ 485 | background: #f9e7d3; 486 | } 487 | 488 | .home{ 489 | background: rgb(206,187,169); 490 | background: linear-gradient(135deg, rgba(206,187,169,1) 0%,rgba(249,231,211,1) 50%,rgba(206,187,169,1) 100%); 491 | } 492 | } 493 | 494 | &.black{ 495 | background: #464646; 496 | box-shadow:inset 0 0 3px 0 rgba(0, 0, 0, 0.7); 497 | 498 | &:before{ 499 | background: #080808; 500 | } 501 | 502 | &:after{ 503 | box-shadow: 504 | inset 0 0 3px 0 rgba(0, 0, 0, 0.1), 505 | inset 0 0 6px 3px #212121; 506 | } 507 | 508 | .top-bar, .bottom-bar{ 509 | background: #212121; 510 | } 511 | 512 | .volume, .sleep{ 513 | background: #464646; 514 | } 515 | 516 | .camera{ 517 | background: #080808; 518 | } 519 | 520 | .home{ 521 | background: rgb(8,8,8); 522 | background: linear-gradient(135deg, rgba(8,8,8,1) 0%,rgba(70,70,70,1) 50%,rgba(8,8,8,1) 100%); 523 | 524 | &:before{ 525 | background: #080808; 526 | } 527 | } 528 | 529 | } 530 | 531 | &.landscape{ 532 | padding: 26px 112px; 533 | height: 414px; 534 | width: 736px; 535 | 536 | .sleep{ 537 | top: 100%; 538 | border-radius: 0px 0px 2px 2px; 539 | right: 190px; 540 | height: 4px; 541 | width: 66px; 542 | } 543 | 544 | .volume { 545 | width: 66px; 546 | height: 4px; 547 | top: -4px; 548 | left: calc(100% - 188px - 66px); 549 | border-radius: 2px 2px 0px 0px; 550 | 551 | &:before { 552 | width: 40px; 553 | height: 2px; 554 | top: 2px; 555 | right: -78px; 556 | left: auto; 557 | border-radius: 2px 2px 0px 0px; 558 | } 559 | 560 | &:after{ 561 | left: -82px; 562 | width: 66px; 563 | height: 4px; 564 | top: 0; 565 | border-radius: 2px 2px 0px 0px; 566 | } 567 | } 568 | 569 | .top-bar{ 570 | width: 14px; 571 | height: 100%; 572 | left: calc(100% - 68px - 14px); 573 | top: 0; 574 | } 575 | 576 | .bottom-bar{ 577 | width: 14px; 578 | height: 100%; 579 | left: 68px; 580 | top: 0; 581 | } 582 | 583 | .home{ 584 | top: 50%; 585 | margin-top: -34px; 586 | margin-left: 0; 587 | left: 24px; 588 | } 589 | 590 | .sensor { 591 | top: 154px; 592 | left: calc(100% - 54px - 16px); 593 | } 594 | 595 | .speaker { 596 | height: 70px; 597 | width: 6px; 598 | left: calc(100% - 59px - 6px); 599 | top: 50%; 600 | margin-left: 0px; 601 | margin-top: -35px; 602 | } 603 | 604 | .camera { 605 | left: calc(100% - 29px); 606 | top: 50%; 607 | margin-left: 0px; 608 | margin-top: -5px; 609 | } 610 | } 611 | } 612 | 613 | &.iphone5s, &.iphone5c{ 614 | padding: 105px 22px; 615 | background: #2c2b2c; 616 | width: 320px; 617 | height: 568px; 618 | border-radius: 50px; 619 | 620 | &:before{ 621 | width: calc(100% - 8px); 622 | height: calc(100% - 8px); 623 | position: absolute; 624 | top: 4px; 625 | content: ''; 626 | left: 4px; 627 | border-radius: 46px; 628 | background: #1e1e1e; 629 | z-index: 1; 630 | } 631 | 632 | .sleep{ 633 | position: absolute; 634 | top: -4px; 635 | right: 60px; 636 | width: 60px; 637 | height: 4px; 638 | border-radius: 2px 2px 0px 0px; 639 | background: #282727; 640 | } 641 | 642 | .volume{ 643 | position: absolute; 644 | left: -4px; 645 | top: 180px; 646 | z-index: 0; 647 | height: 27px; 648 | width: 4px; 649 | border-radius: 2px 0px 0px 2px; 650 | background: #282727; 651 | 652 | &:before { 653 | position: absolute; 654 | left: 0px; 655 | top: -75px; 656 | height: 35px; 657 | width: 4px; 658 | border-radius: 2px 0px 0px 2px; 659 | background: inherit; 660 | content: ''; 661 | display: block; 662 | } 663 | 664 | &:after { 665 | position: absolute; 666 | left: 0px; 667 | bottom: -64px; 668 | height: 27px; 669 | width: 4px; 670 | border-radius: 2px 0px 0px 2px; 671 | background: inherit; 672 | content: ''; 673 | display: block; 674 | } 675 | } 676 | 677 | .camera { 678 | background: #3c3d3d; 679 | width: 10px; 680 | height: 10px; 681 | position: absolute; 682 | top: 32px; 683 | left: 50%; 684 | margin-left: -5px; 685 | border-radius: 5px; 686 | z-index: 3; 687 | } 688 | 689 | .sensor { 690 | background: #3c3d3d; 691 | width: 10px; 692 | height: 10px; 693 | position: absolute; 694 | top: 60px; 695 | left: 160px; 696 | z-index: 3; 697 | margin-left: -32px; 698 | border-radius: 5px; 699 | } 700 | 701 | .speaker { 702 | background: #292728; 703 | width: 64px; 704 | height: 10px; 705 | position: absolute; 706 | top: 60px; 707 | left: 50%; 708 | margin-left: -32px; 709 | border-radius: 5px; 710 | z-index: 3; 711 | } 712 | 713 | &.landscape{ 714 | padding: 22px 105px; 715 | height: 320px; 716 | width: 568px; 717 | 718 | .sleep{ 719 | right: -4px; 720 | top: calc(100% - 120px); 721 | height: 60px; 722 | width: 4px; 723 | border-radius: 0px 2px 2px 0px; 724 | } 725 | 726 | .volume { 727 | width: 27px; 728 | height: 4px; 729 | top: -4px; 730 | left: calc(100% - 180px); 731 | border-radius: 2px 2px 0px 0px; 732 | 733 | &:before { 734 | width: 35px; 735 | height: 4px; 736 | top: 0px; 737 | right: -75px; 738 | left: auto; 739 | border-radius: 2px 2px 0px 0px; 740 | } 741 | 742 | &:after{ 743 | bottom: 0px; 744 | left: -64px; 745 | z-index: 999; 746 | height: 4px; 747 | width: 27px; 748 | border-radius: 2px 2px 0px 0px; 749 | } 750 | } 751 | 752 | .sensor { 753 | top: 160px; 754 | left: calc(100% - 60px); 755 | margin-left: 0px; 756 | margin-top: -32px; 757 | } 758 | 759 | .speaker { 760 | height: 64px; 761 | width: 10px; 762 | left: calc(100% - 60px); 763 | top: 50%; 764 | margin-left: 0px; 765 | margin-top: -32px; 766 | } 767 | 768 | .camera { 769 | left: calc(100% - 32px); 770 | top: 50%; 771 | margin-left: 0px; 772 | margin-top: -5px; 773 | } 774 | } 775 | } 776 | 777 | &.iphone5s{ 778 | .home { 779 | border-radius: 36px; 780 | width: 68px; 781 | box-shadow: inset 0 0 0 4px #2c2b2c; 782 | height: 68px; 783 | position: absolute; 784 | left: 50%; 785 | margin-left: -34px; 786 | bottom: 19px; 787 | z-index: 3; 788 | } 789 | 790 | .top-bar{ 791 | top: 70px; 792 | position: absolute; 793 | left: 0; 794 | } 795 | 796 | .bottom-bar { 797 | bottom: 70px; 798 | position: absolute; 799 | left: 0; 800 | } 801 | 802 | &.landscape{ 803 | .home { 804 | left: 19px; 805 | bottom: 50%; 806 | margin-bottom: -34px; 807 | margin-left: 0px; 808 | } 809 | 810 | .top-bar { 811 | left: 70px; 812 | top: 0px; 813 | width: 3px; 814 | height: 100%; 815 | } 816 | 817 | .bottom-bar { 818 | right: 70px; 819 | left: auto; 820 | bottom: 0px; 821 | width: 3px; 822 | height: 100%; 823 | } 824 | } 825 | 826 | &.silver{ 827 | background: #bcbcbc; 828 | 829 | &:before{ 830 | background: #fcfcfc; 831 | } 832 | 833 | .volume, .sleep{ 834 | background: #d6d6d6; 835 | } 836 | 837 | .top-bar, .bottom-bar{ 838 | background: #eaebec; 839 | } 840 | 841 | .home{ 842 | box-shadow: inset 0 0 0 4px #bcbcbc; 843 | } 844 | } 845 | 846 | &.gold{ 847 | background: #f9e7d3; 848 | 849 | &:before{ 850 | background: #fcfcfc; 851 | } 852 | 853 | .volume, .sleep{ 854 | background: #f9e7d3; 855 | } 856 | 857 | .top-bar, .bottom-bar{ 858 | background: white; 859 | } 860 | 861 | .home{ 862 | box-shadow: inset 0 0 0 4px #f9e7d3; 863 | } 864 | } 865 | } 866 | 867 | &.iphone5c{ 868 | background: white; 869 | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); 870 | 871 | .top-bar, .bottom-bar{ 872 | display: none; 873 | } 874 | 875 | .home{ 876 | background: #242324; 877 | border-radius: 36px; 878 | width: 68px; 879 | height: 68px; 880 | z-index: 3; 881 | position: absolute; 882 | left: 50%; 883 | margin-left: -34px; 884 | bottom: 19px; 885 | 886 | &:after{ 887 | width: 20px; 888 | height: 20px; 889 | border: 1px solid rgba(255, 255, 255, 0.1); 890 | border-radius: 4px; 891 | position: absolute; 892 | display: block; 893 | content: ''; 894 | top: 50%; 895 | left: 50%; 896 | margin-top: -11px; 897 | margin-left: -11px; 898 | } 899 | } 900 | 901 | &.landscape{ 902 | .home { 903 | left: 19px; 904 | bottom: 50%; 905 | margin-bottom: -34px; 906 | margin-left: 0px; 907 | } 908 | } 909 | 910 | .volume, .sleep{ 911 | background: #dddddd; 912 | } 913 | 914 | &.red{ 915 | background: #f96b6c; 916 | 917 | .volume, .sleep{ 918 | background: #ed5758; 919 | } 920 | } 921 | 922 | &.yellow{ 923 | background: #f2dc60; 924 | 925 | .volume, .sleep{ 926 | background: #e5ce4c; 927 | } 928 | } 929 | 930 | &.green{ 931 | background: #97e563; 932 | 933 | .volume, .sleep{ 934 | background: #85d94d; 935 | } 936 | } 937 | 938 | &.blue{ 939 | background: #33a2db; 940 | 941 | .volume, .sleep{ 942 | background: #2694cd; 943 | } 944 | } 945 | } 946 | 947 | &.iphone4s{ 948 | padding: 129px 27px; 949 | width: 320px; 950 | height: 480px; 951 | background: #686868; 952 | border-radius: 54px; 953 | 954 | &:before{ 955 | content: ''; 956 | width: calc(100% - 8px); 957 | height: calc(100% - 8px); 958 | position: absolute; 959 | top: 4px; 960 | left: 4px; 961 | z-index: 1; 962 | border-radius: 50px; 963 | background: #1e1e1e; 964 | } 965 | 966 | .top-bar { 967 | top: 60px; 968 | position: absolute; 969 | left: 0; 970 | } 971 | 972 | .bottom-bar { 973 | bottom: 90px; 974 | position: absolute; 975 | left: 0; 976 | } 977 | 978 | .camera { 979 | background: #3c3d3d; 980 | width: 10px; 981 | height: 10px; 982 | position: absolute; 983 | top: 72px; 984 | left: 134px; 985 | z-index: 3; 986 | margin-left: -5px; 987 | border-radius: 100%; 988 | } 989 | 990 | .speaker { 991 | background: #292728; 992 | width: 64px; 993 | height: 10px; 994 | position: absolute; 995 | top: 72px; 996 | left: 50%; 997 | z-index: 3; 998 | margin-left: -32px; 999 | border-radius: 5px; 1000 | } 1001 | 1002 | .sensor { 1003 | background: #292728; 1004 | width: 40px; 1005 | height: 10px; 1006 | position: absolute; 1007 | top: 36px; 1008 | left: 50%; 1009 | z-index: 3; 1010 | margin-left: -20px; 1011 | border-radius: 5px; 1012 | } 1013 | 1014 | .home { 1015 | background: #242324; 1016 | border-radius: 100%; 1017 | width: 72px; 1018 | height: 72px; 1019 | z-index: 3; 1020 | position: absolute; 1021 | left: 50%; 1022 | margin-left: -36px; 1023 | bottom: 30px; 1024 | 1025 | &:after { 1026 | width: 20px; 1027 | height: 20px; 1028 | border: 1px solid rgba(255, 255, 255, 0.1); 1029 | border-radius: 4px; 1030 | position: absolute; 1031 | display: block; 1032 | content: ''; 1033 | top: 50%; 1034 | left: 50%; 1035 | margin-top: -11px; 1036 | margin-left: -11px; 1037 | } 1038 | } 1039 | 1040 | .sleep { 1041 | position: absolute; 1042 | top: -4px; 1043 | right: 60px; 1044 | width: 60px; 1045 | height: 4px; 1046 | border-radius: 2px 2px 0px 0px; 1047 | background: #4D4D4D; 1048 | } 1049 | 1050 | .volume { 1051 | position: absolute; 1052 | left: -4px; 1053 | top: 160px; 1054 | height: 27px; 1055 | width: 4px; 1056 | border-radius: 2px 0px 0px 2px; 1057 | background: #4D4D4D; 1058 | 1059 | &:before { 1060 | position: absolute; 1061 | left: 0px; 1062 | top: -70px; 1063 | height: 35px; 1064 | width: 4px; 1065 | border-radius: 2px 0px 0px 2px; 1066 | background: inherit; 1067 | content: ''; 1068 | display: block; 1069 | } 1070 | 1071 | &:after { 1072 | position: absolute; 1073 | left: 0px; 1074 | bottom: -64px; 1075 | height: 27px; 1076 | width: 4px; 1077 | border-radius: 2px 0px 0px 2px; 1078 | background: inherit; 1079 | content: ''; 1080 | display: block; 1081 | } 1082 | } 1083 | 1084 | &.landscape{ 1085 | padding: 27px 129px; 1086 | height: 320px; 1087 | width: 480px; 1088 | 1089 | .bottom-bar { 1090 | left: 90px; 1091 | bottom: 0px; 1092 | height: 100%; 1093 | width: 3px; 1094 | } 1095 | 1096 | .top-bar { 1097 | left: calc(100% - 60px); 1098 | top: 0px; 1099 | height: 100%; 1100 | width: 3px; 1101 | } 1102 | 1103 | .camera { 1104 | top: 134px; 1105 | left: calc(100% - 72px); 1106 | margin-left: 0; 1107 | } 1108 | 1109 | .speaker{ 1110 | top: 50%; 1111 | margin-left: 0; 1112 | margin-top: -32px; 1113 | left: calc(100% - 72px); 1114 | width: 10px; 1115 | height: 64px; 1116 | } 1117 | 1118 | .sensor { 1119 | height: 40px; 1120 | width: 10px; 1121 | left: calc(100% - 36px); 1122 | top: 50%; 1123 | margin-left: 0; 1124 | margin-top: -20px; 1125 | } 1126 | 1127 | .home { 1128 | left: 30px; 1129 | bottom: 50%; 1130 | margin-left: 0; 1131 | margin-bottom: -36px; 1132 | } 1133 | 1134 | .sleep { 1135 | height: 60px; 1136 | width: 4px; 1137 | right: -4px; 1138 | top: calc(100% - 120px); 1139 | border-radius: 0px 2px 2px 0px; 1140 | } 1141 | 1142 | .volume { 1143 | top: -4px; 1144 | left: calc(100% - 187px); 1145 | height: 4px; 1146 | width: 27px; 1147 | border-radius: 2px 2px 0px 0px; 1148 | 1149 | &:before { 1150 | right: -70px; 1151 | left: auto; 1152 | top: 0px; 1153 | width: 35px; 1154 | height: 4px; 1155 | border-radius: 2px 2px 0px 0px; 1156 | } 1157 | 1158 | &:after{ 1159 | width: 27px; 1160 | height: 4px; 1161 | bottom: 0px; 1162 | left: -64px; 1163 | border-radius: 2px 2px 0px 0px; 1164 | } 1165 | } 1166 | } 1167 | 1168 | &.silver{ 1169 | background: #bcbcbc; 1170 | 1171 | &:before{ 1172 | background: #fcfcfc; 1173 | } 1174 | 1175 | .home{ 1176 | background: #fcfcfc; 1177 | box-shadow: inset 0 0 0 1px #bcbcbc; 1178 | 1179 | &:after{ 1180 | border: 1px solid rgba(0, 0, 0, 0.2); 1181 | } 1182 | } 1183 | 1184 | .volume, .sleep{ 1185 | background: #d6d6d6; 1186 | } 1187 | } 1188 | } 1189 | 1190 | &.nexus5{ 1191 | padding: 50px 15px 50px 15px; 1192 | width: 320px; 1193 | height: 568px; 1194 | background: #1e1e1e; 1195 | border-radius: 20px; 1196 | 1197 | &:before{ 1198 | border-radius: 600px / 50px; 1199 | background: inherit; 1200 | content: ''; 1201 | top: 0; 1202 | position: absolute; 1203 | height: 103.1%; 1204 | width: calc(100% - 26px); 1205 | top: 50%; 1206 | left: 50%; 1207 | transform: translateX(-50%) translateY(-50%); 1208 | } 1209 | 1210 | .top-bar{ 1211 | width: calc(100% - 8px); 1212 | height: calc(100% - 6px); 1213 | position: absolute; 1214 | top: 3px; 1215 | left: 4px; 1216 | border-radius: 20px; 1217 | background: #181818; 1218 | 1219 | &:before { 1220 | border-radius: 600px / 50px; 1221 | background: inherit; 1222 | content: ''; 1223 | top: 0; 1224 | position: absolute; 1225 | height: 103.0%; 1226 | width: calc(100% - 26px); 1227 | top: 50%; 1228 | left: 50%; 1229 | transform: translateX(-50%) translateY(-50%); 1230 | } 1231 | } 1232 | 1233 | .bottom-bar{ 1234 | display: none; 1235 | } 1236 | 1237 | .sleep{ 1238 | width: 3px; 1239 | position: absolute; 1240 | left: -3px; 1241 | top: 110px; 1242 | height: 100px; 1243 | background: inherit; 1244 | border-radius: 2px 0px 0px 2px; 1245 | } 1246 | 1247 | .volume{ 1248 | width: 3px; 1249 | position: absolute; 1250 | right: -3px; 1251 | top: 70px; 1252 | height: 45px; 1253 | background: inherit; 1254 | border-radius: 0px 2px 2px 0px; 1255 | } 1256 | 1257 | .camera { 1258 | background: #3c3d3d; 1259 | width: 10px; 1260 | height: 10px; 1261 | position: absolute; 1262 | top: 18px; 1263 | left: 50%; 1264 | z-index: 3; 1265 | margin-left: -5px; 1266 | border-radius: 100%; 1267 | 1268 | &:before { 1269 | background: #3c3d3d; 1270 | width: 6px; 1271 | height: 6px; 1272 | content: ''; 1273 | display: block; 1274 | position: absolute; 1275 | top: 2px; 1276 | left: -100px; 1277 | z-index: 3; 1278 | border-radius: 100%; 1279 | } 1280 | } 1281 | 1282 | &.landscape{ 1283 | padding: 15px 50px 15px 50px; 1284 | height: 320px; 1285 | width: 568px; 1286 | 1287 | &:before { 1288 | width: 103.1%; 1289 | height: calc(100% - 26px); 1290 | border-radius: 50px / 600px; 1291 | } 1292 | 1293 | .top-bar { 1294 | left: 3px; 1295 | top: 4px; 1296 | height: calc(100% - 8px); 1297 | width: calc(100% - 6px); 1298 | 1299 | &:before { 1300 | width: 103%; 1301 | height: calc(100% - 26px); 1302 | border-radius: 50px / 600px; 1303 | } 1304 | } 1305 | 1306 | .sleep{ 1307 | height: 3px; 1308 | width: 100px; 1309 | left: calc(100% - 210px); 1310 | top: -3px; 1311 | border-radius: 2px 2px 0px 0px; 1312 | } 1313 | 1314 | .volume{ 1315 | height: 3px; 1316 | width: 45px; 1317 | right: 70px; 1318 | top: 100%; 1319 | border-radius: 0px 0px 2px 2px; 1320 | } 1321 | 1322 | .camera { 1323 | top: 50%; 1324 | left: calc(100% - 18px); 1325 | margin-left: 0; 1326 | margin-top: -5px; 1327 | 1328 | &:before { 1329 | top: -100px; 1330 | left: 2px; 1331 | } 1332 | } 1333 | } 1334 | } 1335 | 1336 | &.s5{ 1337 | padding: 60px 18px; 1338 | border-radius: 42px; 1339 | width: 320px; 1340 | height: 568px; 1341 | background: #bcbcbc; 1342 | 1343 | &:before, &:after{ 1344 | width: calc(100% - 52px); 1345 | content: ''; 1346 | display: block; 1347 | height: 26px; 1348 | background: inherit; 1349 | position: absolute; 1350 | border-radius: 500px / 40px; 1351 | left: 50%; 1352 | transform: translateX(-50%); 1353 | } 1354 | 1355 | &:before{ 1356 | top: -7px; 1357 | } 1358 | 1359 | &:after{ 1360 | bottom: -7px; 1361 | } 1362 | 1363 | .bottom-bar{ 1364 | display: none; 1365 | } 1366 | 1367 | .top-bar{ 1368 | border-radius: 37px; 1369 | width: calc(100% - 10px); 1370 | height: calc(100% - 10px); 1371 | top: 5px; 1372 | left: 5px; 1373 | background: 1374 | radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 0 0, 1375 | radial-gradient(rgba(0, 0, 0, 0.02) 20%, transparent 60%) 3px 3px; 1376 | background-color: white; 1377 | background-size: 4px 4px; 1378 | background-position: center; 1379 | z-index: 2; 1380 | position: absolute; 1381 | 1382 | &:before, &:after{ 1383 | width: calc(100% - 48px); 1384 | content: ''; 1385 | display: block; 1386 | height: 26px; 1387 | background: inherit; 1388 | position: absolute; 1389 | border-radius: 500px / 40px; 1390 | left: 50%; 1391 | transform: translateX(-50%); 1392 | } 1393 | 1394 | &:before{ 1395 | top: -7px; 1396 | } 1397 | 1398 | &:after{ 1399 | bottom: -7px; 1400 | } 1401 | } 1402 | 1403 | .sleep{ 1404 | width: 3px; 1405 | position: absolute; 1406 | left: -3px; 1407 | top: 100px; 1408 | height: 100px; 1409 | background: #cecece; 1410 | border-radius: 2px 0px 0px 2px; 1411 | } 1412 | 1413 | .speaker { 1414 | width: 68px; 1415 | height: 8px; 1416 | position: absolute; 1417 | top: 20px; 1418 | display: block; 1419 | z-index: 3; 1420 | left: 50%; 1421 | margin-left: -34px; 1422 | background-color: #bcbcbc; 1423 | background-position: top left; 1424 | border-radius: 4px; 1425 | } 1426 | 1427 | .sensor { 1428 | display: block; 1429 | position: absolute; 1430 | top: 20px; 1431 | right: 110px; 1432 | background: #3c3d3d; 1433 | border-radius: 100%; 1434 | width: 8px; 1435 | height: 8px; 1436 | z-index: 3; 1437 | 1438 | &:after { 1439 | display: block; 1440 | content: ''; 1441 | position: absolute; 1442 | top: 0px; 1443 | right: 12px; 1444 | background: #3c3d3d; 1445 | border-radius: 100%; 1446 | width: 8px; 1447 | height: 8px; 1448 | z-index: 3; 1449 | } 1450 | } 1451 | 1452 | .camera { 1453 | display: block; 1454 | position: absolute; 1455 | top: 24px; 1456 | right: 42px; 1457 | background: black; 1458 | border-radius: 100%; 1459 | width: 10px; 1460 | height: 10px; 1461 | z-index: 3; 1462 | 1463 | &:before{ 1464 | width: 4px; 1465 | height: 4px; 1466 | background: #3c3d3d; 1467 | border-radius: 100%; 1468 | position: absolute; 1469 | content: ''; 1470 | top: 50%; 1471 | left: 50%; 1472 | margin-top: -2px; 1473 | margin-left: -2px; 1474 | } 1475 | } 1476 | 1477 | .home { 1478 | position: absolute; 1479 | z-index: 3; 1480 | bottom: 17px; 1481 | left: 50%; 1482 | width: 70px; 1483 | height: 20px; 1484 | background: white; 1485 | border-radius: 18px; 1486 | display: block; 1487 | margin-left: -35px; 1488 | border: 2px solid black; 1489 | } 1490 | 1491 | &.landscape{ 1492 | padding: 18px 60px; 1493 | height: 320px; 1494 | width: 568px; 1495 | 1496 | &:before, &:after{ 1497 | height: calc(100% - 52px); 1498 | width: 26px; 1499 | border-radius: 40px / 500px; 1500 | transform: translateY(-50%); 1501 | } 1502 | 1503 | &:before { 1504 | top: 50%; 1505 | left: -7px; 1506 | } 1507 | 1508 | &:after { 1509 | top: 50%; 1510 | left: auto; 1511 | right: -7px; 1512 | } 1513 | 1514 | .top-bar{ 1515 | &:before, &:after{ 1516 | width: 26px; 1517 | height: calc(100% - 48px); 1518 | border-radius: 40px / 500px; 1519 | transform: translateY(-50%); 1520 | } 1521 | 1522 | &:before{ 1523 | right: -7px; 1524 | top: 50%; 1525 | left: auto; 1526 | } 1527 | 1528 | &:after{ 1529 | left: -7px; 1530 | top: 50%; 1531 | right: auto; 1532 | } 1533 | } 1534 | 1535 | .sleep{ 1536 | height: 3px; 1537 | width: 100px; 1538 | left: calc(100% - 200px); 1539 | top: -3px; 1540 | border-radius: 2px 2px 0px 0px; 1541 | } 1542 | 1543 | .speaker { 1544 | height: 68px; 1545 | width: 8px; 1546 | left: calc(100% - 20px); 1547 | top: 50%; 1548 | margin-left: 0; 1549 | margin-top: -34px; 1550 | } 1551 | 1552 | .sensor { 1553 | right: 20px; 1554 | top: calc(100% - 110px); 1555 | 1556 | &:after{ 1557 | left: -12px; 1558 | right: 0px; 1559 | } 1560 | } 1561 | 1562 | .camera { 1563 | top: calc(100% - 42px); 1564 | right: 24px; 1565 | } 1566 | 1567 | .home { 1568 | width: 20px; 1569 | height: 70px; 1570 | bottom: 50%; 1571 | margin-bottom: -35px; 1572 | margin-left: 0; 1573 | left: 17px; 1574 | } 1575 | } 1576 | 1577 | &.black{ 1578 | background: #1e1e1e; 1579 | 1580 | .speaker{ 1581 | background: black; 1582 | } 1583 | 1584 | .sleep{ 1585 | background: #1e1e1e; 1586 | } 1587 | 1588 | .top-bar{ 1589 | background: radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 0 0, 1590 | radial-gradient(rgba(0, 0, 0, 0.05) 20%, transparent 60%) 3px 3px; 1591 | background-color: #2c2b2c; 1592 | background-size: 4px 4px; 1593 | } 1594 | 1595 | .home{ 1596 | background: #2c2b2c; 1597 | } 1598 | } 1599 | } 1600 | 1601 | &.lumia920{ 1602 | padding: 80px 35px 125px 35px; 1603 | background: #ffdd00; 1604 | width: 320px; 1605 | height: 533px; 1606 | border-radius: 40px / 3px; 1607 | 1608 | .bottom-bar{ 1609 | display: none; 1610 | } 1611 | 1612 | .top-bar{ 1613 | width: calc(100% - 24px); 1614 | height: calc(100% - 32px); 1615 | position: absolute; 1616 | top: 16px; 1617 | left: 12px; 1618 | border-radius: 24px; 1619 | background: black; 1620 | z-index: 1; 1621 | 1622 | &:before{ 1623 | background: #1e1e1e; 1624 | display: block; 1625 | content: ''; 1626 | width: calc(100% - 4px); 1627 | height: calc(100% - 4px); 1628 | top: 2px; 1629 | left: 2px; 1630 | position: absolute; 1631 | border-radius: 22px; 1632 | } 1633 | } 1634 | 1635 | .volume{ 1636 | width: 3px; 1637 | position: absolute; 1638 | top: 130px; 1639 | height: 100px; 1640 | background: #1e1e1e; 1641 | right: -3px; 1642 | border-radius: 0px 2px 2px 0px; 1643 | 1644 | &:before { 1645 | width: 3px; 1646 | position: absolute; 1647 | top: 190px; 1648 | content: ''; 1649 | display: block; 1650 | height: 50px; 1651 | background: inherit; 1652 | right: 0px; 1653 | border-radius: 0px 2px 2px 0px; 1654 | } 1655 | 1656 | &:after { 1657 | width: 3px; 1658 | position: absolute; 1659 | top: 460px; 1660 | content: ''; 1661 | display: block; 1662 | height: 50px; 1663 | background: inherit; 1664 | right: 0px; 1665 | border-radius: 0px 2px 2px 0px; 1666 | } 1667 | } 1668 | 1669 | .camera { 1670 | background: #3c3d3d; 1671 | width: 10px; 1672 | height: 10px; 1673 | position: absolute; 1674 | top: 34px; 1675 | right: 130px; 1676 | z-index: 5; 1677 | border-radius: 5px; 1678 | } 1679 | 1680 | .speaker { 1681 | background: #292728; 1682 | width: 64px; 1683 | height: 10px; 1684 | position: absolute; 1685 | top: 38px; 1686 | left: 50%; 1687 | margin-left: -32px; 1688 | border-radius: 5px; 1689 | z-index: 3; 1690 | } 1691 | 1692 | &.landscape{ 1693 | padding: 35px 80px 35px 125px; 1694 | height: 320px; 1695 | width: 568px; 1696 | border-radius: 2px / 100px; 1697 | 1698 | .top-bar{ 1699 | height: calc(100% - 24px); 1700 | width: calc(100% - 32px); 1701 | left: 16px; 1702 | top: 12px; 1703 | } 1704 | 1705 | .volume { 1706 | height: 3px; 1707 | right: 130px; 1708 | width: 100px; 1709 | top: 100%; 1710 | border-radius: 0px 0px 2px 2px; 1711 | 1712 | &:before{ 1713 | height: 3px; 1714 | right: 190px; 1715 | top: 0px; 1716 | width: 50px; 1717 | border-radius: 0px 0px 2px 2px; 1718 | } 1719 | 1720 | &:after{ 1721 | height: 3px; 1722 | right: 430px; 1723 | top: 0px; 1724 | width: 50px; 1725 | border-radius: 0px 0px 2px 2px; 1726 | } 1727 | } 1728 | 1729 | .camera { 1730 | right: 30px; 1731 | top: calc(100% - 140px); 1732 | } 1733 | 1734 | .speaker { 1735 | width: 10px; 1736 | height: 64px; 1737 | top: 50%; 1738 | margin-left: 0; 1739 | margin-top: -32px; 1740 | left: calc(100% - 48px); 1741 | } 1742 | } 1743 | 1744 | &.black{ 1745 | background: black; 1746 | } 1747 | 1748 | &.white{ 1749 | background: white; 1750 | box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2); 1751 | } 1752 | 1753 | &.blue{ 1754 | background: #00acdd; 1755 | } 1756 | 1757 | &.red{ 1758 | background: #CC3E32; 1759 | } 1760 | } 1761 | 1762 | &.htc-one { 1763 | padding: 72px 25px 100px 25px; 1764 | width: 320px; 1765 | height: 568px; 1766 | background: #bebebe; 1767 | border-radius: 34px; 1768 | 1769 | &:before{ 1770 | content: ''; 1771 | display: block; 1772 | width: calc(100% - 4px); 1773 | height: calc(100% - 4px); 1774 | position: absolute; 1775 | top: 2px; 1776 | left: 2px; 1777 | background: #adadad; 1778 | border-radius: 32px; 1779 | } 1780 | 1781 | &:after{ 1782 | content: ''; 1783 | display: block; 1784 | width: calc(100% - 8px); 1785 | height: calc(100% - 8px); 1786 | position: absolute; 1787 | top: 4px; 1788 | left: 4px; 1789 | background: #eeeeee; 1790 | border-radius: 30px; 1791 | } 1792 | 1793 | .top-bar{ 1794 | width: calc(100% - 4px); 1795 | height: 635px; 1796 | position: absolute; 1797 | background: #424242; 1798 | top: 50px; 1799 | z-index: 1; 1800 | left: 2px; 1801 | 1802 | &:before{ 1803 | content: ''; 1804 | position: absolute; 1805 | width: calc(100% - 4px); 1806 | height: 100%; 1807 | position: absolute; 1808 | background: black; 1809 | top: 0px; 1810 | z-index: 1; 1811 | left: 2px; 1812 | } 1813 | } 1814 | 1815 | .bottom-bar{ 1816 | display: none; 1817 | } 1818 | 1819 | .speaker { 1820 | height: 16px; 1821 | width: 216px; 1822 | display: block; 1823 | position: absolute; 1824 | top: 22px; 1825 | z-index: 2; 1826 | left: 50%; 1827 | margin-left: -108px; 1828 | background: radial-gradient(#343434 25%, transparent 50%) 0 0, 1829 | radial-gradient(#343434 25%, transparent 50%) 4px 4px; 1830 | background-size: 4px 4px; 1831 | background-position: top left; 1832 | 1833 | &:after { 1834 | content: ''; 1835 | height: 16px; 1836 | width: 216px; 1837 | display: block; 1838 | position: absolute; 1839 | top: 676px; 1840 | z-index: 2; 1841 | left: 50%; 1842 | margin-left: -108px; 1843 | background: inherit; 1844 | } 1845 | } 1846 | 1847 | .camera { 1848 | display: block; 1849 | position: absolute; 1850 | top: 18px; 1851 | right: 38px; 1852 | background: #3c3d3d; 1853 | border-radius: 100%; 1854 | width: 24px; 1855 | height: 24px; 1856 | z-index: 3; 1857 | 1858 | &:before { 1859 | width: 8px; 1860 | height: 8px; 1861 | background: black; 1862 | border-radius: 100%; 1863 | position: absolute; 1864 | content: ''; 1865 | top: 50%; 1866 | left: 50%; 1867 | margin-top: -4px; 1868 | margin-left: -4px; 1869 | } 1870 | } 1871 | 1872 | .sensor { 1873 | display: block; 1874 | position: absolute; 1875 | top: 29px; 1876 | left: 60px; 1877 | background: #3c3d3d; 1878 | border-radius: 100%; 1879 | width: 8px; 1880 | height: 8px; 1881 | z-index: 3; 1882 | 1883 | &:after { 1884 | display: block; 1885 | content: ''; 1886 | position: absolute; 1887 | top: 0px; 1888 | right: 12px; 1889 | background: #3c3d3d; 1890 | border-radius: 100%; 1891 | width: 8px; 1892 | height: 8px; 1893 | z-index: 3; 1894 | } 1895 | } 1896 | 1897 | &.landscape{ 1898 | padding: 25px 72px 25px 100px; 1899 | height: 320px; 1900 | width: 568px; 1901 | 1902 | .top-bar{ 1903 | height: calc(100% - 4px); 1904 | width: 635px; 1905 | left: calc(100% - 685px); 1906 | top: 2px; 1907 | } 1908 | 1909 | .speaker { 1910 | width: 16px; 1911 | height: 216px; 1912 | left: calc(100% - 38px); 1913 | top: 50%; 1914 | margin-left: 0px; 1915 | margin-top: -108px; 1916 | 1917 | &:after { 1918 | width: 16px; 1919 | height: 216px; 1920 | left: calc(100% - 692px); 1921 | top: 50%; 1922 | margin-left: 0; 1923 | margin-top: -108px; 1924 | } 1925 | } 1926 | 1927 | .camera { 1928 | right: 18px; 1929 | top: calc(100% - 38px); 1930 | } 1931 | 1932 | .sensor { 1933 | left: calc(100% - 29px); 1934 | top: 60px; 1935 | 1936 | :after { 1937 | right: 0; 1938 | top: -12px; 1939 | } 1940 | } 1941 | } 1942 | } 1943 | 1944 | &.ipad{ 1945 | width: 576px; 1946 | height: 768px; 1947 | padding: 90px 25px; 1948 | background: #242324; 1949 | border-radius: 44px; 1950 | 1951 | &:before{ 1952 | width: calc(100% - 8px); 1953 | height: calc(100% - 8px); 1954 | position: absolute; 1955 | content: ''; 1956 | display: block; 1957 | top: 4px; 1958 | left: 4px; 1959 | border-radius: 40px; 1960 | background: #1e1e1e; 1961 | } 1962 | 1963 | .camera { 1964 | background: #3c3d3d; 1965 | width: 10px; 1966 | height: 10px; 1967 | position: absolute; 1968 | top: 44px; 1969 | left: 50%; 1970 | margin-left: -5px; 1971 | border-radius: 100%; 1972 | } 1973 | 1974 | .top-bar, .bottom-bar{ 1975 | display: none; 1976 | } 1977 | 1978 | .home { 1979 | background: #242324; 1980 | border-radius: 36px; 1981 | width: 50px; 1982 | height: 50px; 1983 | position: absolute; 1984 | left: 50%; 1985 | margin-left: -25px; 1986 | bottom: 22px; 1987 | 1988 | &:after { 1989 | width: 15px; 1990 | height: 15px; 1991 | margin-top: -8px; 1992 | margin-left: -8px; 1993 | border: 1px solid rgba(255, 255, 255, 0.1); 1994 | border-radius: 4px; 1995 | position: absolute; 1996 | display: block; 1997 | content: ''; 1998 | top: 50%; 1999 | left: 50%; 2000 | } 2001 | } 2002 | 2003 | &.landscape{ 2004 | height: 576px; 2005 | width: 768px; 2006 | padding: 25px 90px; 2007 | 2008 | .camera { 2009 | left: calc(100% - 44px); 2010 | top: 50%; 2011 | margin-left: 0; 2012 | margin-top: -5px; 2013 | } 2014 | 2015 | .home { 2016 | top: 50%; 2017 | left: 22px; 2018 | margin-left: 0; 2019 | margin-top: -25px; 2020 | } 2021 | } 2022 | 2023 | &.silver{ 2024 | background: #bcbcbc; 2025 | 2026 | &:before{ 2027 | background: #fcfcfc; 2028 | } 2029 | 2030 | .home{ 2031 | background: #fcfcfc; 2032 | box-shadow: inset 0 0 0 1px #bcbcbc; 2033 | 2034 | &:after{ 2035 | border: 1px solid rgba(0, 0, 0, 0.2); 2036 | } 2037 | } 2038 | } 2039 | } 2040 | 2041 | &.macbook { 2042 | width: 960px; 2043 | height: 600px; 2044 | padding: 44px 44px 76px; 2045 | margin: 0 auto; 2046 | background: #bebebe; 2047 | border-radius: 34px; 2048 | 2049 | &:before { 2050 | width: calc(100% - 8px); 2051 | height: calc(100% - 8px); 2052 | position: absolute; 2053 | content: ''; 2054 | display: block; 2055 | top: 4px; 2056 | left: 4px; 2057 | border-radius: 30px; 2058 | background: #1e1e1e; 2059 | } 2060 | 2061 | .top-bar { 2062 | width: calc(100% + 2 * 70px); 2063 | height: 40px; 2064 | position: absolute; 2065 | content: ''; 2066 | display: block; 2067 | top: 680px; 2068 | left: -70px; 2069 | border-bottom-left-radius: 90px 18px; 2070 | border-bottom-right-radius: 90px 18px; 2071 | background: #bebebe; 2072 | box-shadow: inset 0px -4px 13px 3px rgba(34, 34, 34, 0.6); 2073 | 2074 | &:before { 2075 | width: 100%; 2076 | height: 24px; 2077 | content: ''; 2078 | display: block; 2079 | top: 0; 2080 | left: 0; 2081 | background: #f0f0f0; 2082 | border-bottom: 2px solid #aaa; 2083 | border-radius: 5px; 2084 | position: relative; 2085 | } 2086 | 2087 | &:after { 2088 | width: 16%; 2089 | height: 14px; 2090 | content: ''; 2091 | display: block; 2092 | top: 0; 2093 | background: #ddd; 2094 | position: absolute; 2095 | margin-left: auto; 2096 | margin-right: auto; 2097 | left: 0; 2098 | right: 0; 2099 | border-radius: 0 0 20px 20px; 2100 | box-shadow: inset 0px -3px 10px #999; 2101 | } 2102 | } 2103 | 2104 | .bottom-bar { 2105 | background: transparent; 2106 | width: calc(100% + 2 * 70px); 2107 | height: 26px; 2108 | position: absolute; 2109 | content: ''; 2110 | display: block; 2111 | top: 680px; 2112 | left: -70px; 2113 | 2114 | &:before, 2115 | &:after { 2116 | height: calc(100% - 2px); 2117 | width: 80px; 2118 | content: ''; 2119 | display: block; 2120 | top: 0; 2121 | 2122 | position: absolute; 2123 | } 2124 | 2125 | &:before { 2126 | left: 0; 2127 | background: #f0f0f0; 2128 | background: linear-gradient(to right, #747474 0%, #c3c3c3 5%, #ebebeb 14%, #979797 41%, #f0f0f0 80%, #f0f0f0 100%, #f0f0f0 100%); 2129 | } 2130 | 2131 | &:after { 2132 | right: 0; 2133 | background: #f0f0f0; 2134 | background: linear-gradient(to right, #f0f0f0 0%, #f0f0f0 0%, #f0f0f0 20%, #979797 59%, #ebebeb 86%, #c3c3c3 95%, #747474 100%); 2135 | } 2136 | } 2137 | 2138 | .camera { 2139 | background: #3c3d3d; 2140 | width: 10px; 2141 | height: 10px; 2142 | position: absolute; 2143 | top: 20px; 2144 | left: 50%; 2145 | margin-left: -5px; 2146 | border-radius: 100%; 2147 | } 2148 | 2149 | .home { 2150 | display: none; 2151 | } 2152 | } 2153 | 2154 | &.iphone-x { 2155 | width: 375px; 2156 | height: 812px; 2157 | padding: 26px; 2158 | background: #fdfdfd; 2159 | box-shadow:inset 0 0 11px 0 black; 2160 | border-radius: 66px; 2161 | 2162 | .overflow { 2163 | width: 100%; 2164 | height: 100%; 2165 | position: absolute; 2166 | top: 0; 2167 | left: 0; 2168 | border-radius: 66px; 2169 | overflow: hidden; 2170 | } 2171 | 2172 | .shadow { 2173 | border-radius: 100%; 2174 | width: 90px; 2175 | height: 90px; 2176 | position: absolute; 2177 | background: radial-gradient(ellipse at center, rgba(0,0,0,0.6) 0%,rgba(255,255,255,0) 60%); 2178 | } 2179 | 2180 | .shadow--tl { 2181 | top: -20px; 2182 | left: -20px; 2183 | } 2184 | 2185 | .shadow--tr { 2186 | top: -20px; 2187 | right: -20px; 2188 | } 2189 | 2190 | .shadow--bl { 2191 | bottom: -20px; 2192 | left: -20px; 2193 | } 2194 | 2195 | .shadow--br { 2196 | bottom: -20px; 2197 | right: -20px; 2198 | } 2199 | 2200 | &:before{ 2201 | width: calc(100% - 10px); 2202 | height: calc(100% - 10px); 2203 | position: absolute; 2204 | top: 5px; 2205 | content: ''; 2206 | left: 5px; 2207 | border-radius: 61px; 2208 | background: black; 2209 | z-index: 1; 2210 | } 2211 | 2212 | .inner-shadow{ 2213 | width: calc(100% - 20px); 2214 | height: calc(100% - 20px); 2215 | position: absolute; 2216 | top: 10px; 2217 | overflow: hidden; 2218 | left: 10px; 2219 | border-radius: 56px; 2220 | box-shadow: inset 0 0 15px 0 rgba(white, 0.66); 2221 | z-index: 1; 2222 | 2223 | &:before{ 2224 | box-shadow:inset 0 0 20px 0 #FFFFFF; 2225 | width: 100%; 2226 | height: 116%; 2227 | position: absolute; 2228 | top: -8%; 2229 | content: ''; 2230 | left: 0; 2231 | border-radius: 200px / 112px; 2232 | z-index: 2; 2233 | } 2234 | } 2235 | 2236 | .screen { 2237 | border-radius: 40px; 2238 | box-shadow: none; 2239 | } 2240 | 2241 | .top-bar, .bottom-bar { 2242 | width: 100%; 2243 | position: absolute; 2244 | height: 8px; 2245 | background: rgba(black, 0.1); 2246 | left: 0; 2247 | } 2248 | 2249 | .top-bar { 2250 | top: 80px; 2251 | } 2252 | 2253 | .bottom-bar { 2254 | bottom: 80px; 2255 | } 2256 | 2257 | .volume, .volume:before, .volume:after, .sleep { 2258 | width: 3px; 2259 | background: #b5b5b5; 2260 | position: absolute; 2261 | } 2262 | 2263 | .volume { 2264 | left: -3px; 2265 | top: 116px; 2266 | height: 32px; 2267 | 2268 | &:before { 2269 | height: 62px; 2270 | top: 62px; 2271 | content: ''; 2272 | left: 0; 2273 | } 2274 | 2275 | &:after { 2276 | height: 62px; 2277 | top: 140px; 2278 | content: ''; 2279 | left: 0; 2280 | } 2281 | } 2282 | 2283 | .sleep { 2284 | height: 96px; 2285 | top: 200px; 2286 | right: -3px; 2287 | } 2288 | 2289 | .camera { 2290 | width: 6px; 2291 | height: 6px; 2292 | top: 9px; 2293 | border-radius: 100%; 2294 | position: absolute; 2295 | left: 154px; 2296 | background: #0d4d71; 2297 | } 2298 | 2299 | .speaker { 2300 | height: 6px; 2301 | width: 60px; 2302 | left: 50%; 2303 | position: absolute; 2304 | top: 9px; 2305 | margin-left: -30px; 2306 | background: #171818; 2307 | border-radius: 6px; 2308 | } 2309 | 2310 | .notch { 2311 | position: absolute; 2312 | width: 210px; 2313 | height: 30px; 2314 | top: 26px; 2315 | left: 108px; 2316 | z-index: 4; 2317 | background: black; 2318 | border-bottom-left-radius: 24px; 2319 | border-bottom-right-radius: 24px; 2320 | 2321 | &:before, &:after { 2322 | content: ''; 2323 | height: 8px; 2324 | position: absolute; 2325 | top: 0; 2326 | width: 8px; 2327 | } 2328 | 2329 | &:after { 2330 | background: radial-gradient(circle at bottom left, transparent 0, transparent 70%, black 70%, black 100%); 2331 | left: -8px; 2332 | } 2333 | 2334 | &:before { 2335 | background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%); 2336 | right: -8px; 2337 | } 2338 | } 2339 | 2340 | &.landscape { 2341 | height: 375px; 2342 | width: 812px; 2343 | 2344 | .top-bar, .bottom-bar { 2345 | width: 8px; 2346 | height: 100%; 2347 | top: 0; 2348 | } 2349 | 2350 | .top-bar { 2351 | left: 80px; 2352 | } 2353 | 2354 | .bottom-bar { 2355 | right: 80px; 2356 | bottom: auto; 2357 | left: auto; 2358 | } 2359 | 2360 | .volume, .volume:before, .volume:after, .sleep { 2361 | height: 3px; 2362 | } 2363 | 2364 | .inner-shadow:before { 2365 | height: 100%; 2366 | width: 116%; 2367 | left: -8%; 2368 | top: 0; 2369 | border-radius: 112px / 200px; 2370 | } 2371 | 2372 | .volume { 2373 | bottom: -3px; 2374 | top: auto; 2375 | left: 116px; 2376 | width: 32px; 2377 | 2378 | &:before { 2379 | width: 62px; 2380 | left: 62px; 2381 | top: 0; 2382 | } 2383 | 2384 | &:after { 2385 | width: 62px; 2386 | left: 140px; 2387 | top: 0; 2388 | } 2389 | } 2390 | 2391 | .sleep { 2392 | width: 96px; 2393 | left: 200px; 2394 | top: -3px; 2395 | right: auto; 2396 | } 2397 | 2398 | .camera { 2399 | left: 9px; 2400 | bottom: 154px; 2401 | top: auto; 2402 | } 2403 | 2404 | .speaker { 2405 | width: 6px; 2406 | height: 60px; 2407 | left: 9px; 2408 | top: 50%; 2409 | margin-top: -30px; 2410 | margin-left: 0; 2411 | } 2412 | 2413 | .notch { 2414 | height: 210px; 2415 | width: 30px; 2416 | left: 26px; 2417 | bottom: 108px; 2418 | top: auto; 2419 | border-top-right-radius: 24px; 2420 | border-bottom-right-radius: 24px; 2421 | border-bottom-left-radius: 0; 2422 | 2423 | &:before, &:after { 2424 | left: 0; 2425 | } 2426 | 2427 | &:after { 2428 | background: radial-gradient(circle at bottom right, transparent 0, transparent 70%, black 70%, black 100%); 2429 | bottom: -8px; 2430 | top: auto; 2431 | } 2432 | 2433 | &:before { 2434 | background: radial-gradient(circle at top right, transparent 0, transparent 70%, black 70%, black 100%); 2435 | top: -8px; 2436 | } 2437 | } 2438 | } 2439 | } 2440 | 2441 | &.note8 { 2442 | width: 400px; 2443 | height: 822px; 2444 | background: black; 2445 | border-radius: 34px; 2446 | padding: 45px 10px; 2447 | 2448 | .overflow { 2449 | width: 100%; 2450 | height: 100%; 2451 | position: absolute; 2452 | top: 0; 2453 | left: 0; 2454 | border-radius: 34px; 2455 | overflow: hidden; 2456 | } 2457 | 2458 | .speaker { 2459 | height: 8px; 2460 | width: 56px; 2461 | left: 50%; 2462 | position: absolute; 2463 | top: 25px; 2464 | margin-left: -28px; 2465 | background: #171818; 2466 | z-index: 1; 2467 | border-radius: 8px; 2468 | } 2469 | 2470 | .camera { 2471 | height: 18px; 2472 | width: 18px; 2473 | left: 86px; 2474 | position: absolute; 2475 | top: 18px; 2476 | background: #212b36; 2477 | z-index: 1; 2478 | border-radius: 100%; 2479 | 2480 | &:before{ 2481 | content: ''; 2482 | height: 8px; 2483 | width: 8px; 2484 | left: -22px; 2485 | position: absolute; 2486 | top: 5px; 2487 | background: #212b36; 2488 | z-index: 1; 2489 | border-radius: 100%; 2490 | } 2491 | } 2492 | 2493 | .sensors { 2494 | height: 10px; 2495 | width: 10px; 2496 | left: 120px; 2497 | position: absolute; 2498 | top: 22px; 2499 | background: #1d233b; 2500 | z-index: 1; 2501 | border-radius: 100%; 2502 | 2503 | &:before{ 2504 | content: ''; 2505 | height: 10px; 2506 | width: 10px; 2507 | left: 18px; 2508 | position: absolute; 2509 | top: 0; 2510 | background: #1d233b; 2511 | z-index: 1; 2512 | border-radius: 100%; 2513 | } 2514 | } 2515 | 2516 | .more-sensors { 2517 | height: 16px; 2518 | width: 16px; 2519 | left: 285px; 2520 | position: absolute; 2521 | top: 18px; 2522 | background: #33244a; 2523 | box-shadow: 0 0 0 2px rgba(white, 0.1); 2524 | z-index: 1; 2525 | border-radius: 100%; 2526 | 2527 | &:before{ 2528 | content: ''; 2529 | height: 11px; 2530 | width: 11px; 2531 | left: 40px; 2532 | position: absolute; 2533 | top: 4px; 2534 | background: #214a61; 2535 | z-index: 1; 2536 | border-radius: 100%; 2537 | } 2538 | } 2539 | 2540 | .sleep { 2541 | width: 2px; 2542 | height: 56px; 2543 | background: black; 2544 | position: absolute; 2545 | top: 288px; 2546 | right: -2px; 2547 | } 2548 | 2549 | .volume { 2550 | width: 2px; 2551 | height: 120px; 2552 | background: black; 2553 | position: absolute; 2554 | top: 168px; 2555 | left: -2px; 2556 | 2557 | &:before { 2558 | content: ''; 2559 | top: 168px; 2560 | width: 2px; 2561 | position: absolute; 2562 | left: 0; 2563 | background: black; 2564 | height: 56px; 2565 | } 2566 | } 2567 | 2568 | .inner { 2569 | width: 100%; 2570 | height: calc(100% - 8px); 2571 | position: absolute; 2572 | top: 2px; 2573 | content: ''; 2574 | left: 0px; 2575 | border-radius: 34px; 2576 | border-top: 2px solid #9fa0a2; 2577 | border-bottom: 2px solid #9fa0a2; 2578 | background: black; 2579 | z-index: 1; 2580 | box-shadow: inset 0 0 6px 0 rgba(white, 0.5); 2581 | } 2582 | 2583 | .shadow{ 2584 | box-shadow: 2585 | inset 0 0 60px 0 white, 2586 | inset 0 0 30px 0 rgba(white, 0.5), 2587 | 0 0 20px 0 white, 2588 | 0 0 20px 0 rgba(white, 0.5); 2589 | height: 101%; 2590 | position: absolute; 2591 | top: -0.5%; 2592 | content: ''; 2593 | width: calc(100% - 20px); 2594 | left: 10px; 2595 | border-radius: 38px; 2596 | z-index: 5; 2597 | pointer-events: none; 2598 | } 2599 | 2600 | .screen { 2601 | border-radius: 14px; 2602 | box-shadow: none; 2603 | } 2604 | 2605 | &.landscape { 2606 | height: 400px; 2607 | width: 822px; 2608 | padding: 10px 45px; 2609 | 2610 | .speaker { 2611 | height: 56px; 2612 | width: 8px; 2613 | top: 50%; 2614 | margin-top: -28px; 2615 | margin-left: 0; 2616 | right: 25px; 2617 | left: auto; 2618 | } 2619 | 2620 | .camera { 2621 | top: 86px; 2622 | right: 18px; 2623 | left: auto; 2624 | 2625 | &:before { 2626 | top: -22px; 2627 | left: 5px; 2628 | } 2629 | } 2630 | 2631 | .sensors { 2632 | top: 120px; 2633 | right: 22px; 2634 | left: auto; 2635 | 2636 | &:before { 2637 | top: 18px; 2638 | left: 0; 2639 | } 2640 | } 2641 | 2642 | .more-sensors { 2643 | top: 285px; 2644 | right: 18px; 2645 | left: auto; 2646 | 2647 | &:before { 2648 | top: 40px; 2649 | left: 4px; 2650 | } 2651 | } 2652 | 2653 | .sleep { 2654 | bottom: -2px; 2655 | top: auto; 2656 | right: 288px; 2657 | width: 56px; 2658 | height: 2px; 2659 | } 2660 | 2661 | .volume { 2662 | width: 120px; 2663 | height: 2px; 2664 | top: -2px; 2665 | right: 168px; 2666 | left: auto; 2667 | 2668 | &:before { 2669 | right: 168px; 2670 | left: auto; 2671 | top: 0; 2672 | width: 56px; 2673 | height: 2px; 2674 | } 2675 | } 2676 | 2677 | .inner { 2678 | height: 100%; 2679 | width: calc(100% - 8px); 2680 | left: 2px; 2681 | top: 0; 2682 | border-top: 0; 2683 | border-bottom: 0; 2684 | border-left: 2px solid #9fa0a2; 2685 | border-right: 2px solid #9fa0a2; 2686 | } 2687 | 2688 | .shadow { 2689 | width: 101%; 2690 | height: calc(100% - 20px); 2691 | left: -0.5%; 2692 | top: 10px; 2693 | } 2694 | } 2695 | } 2696 | } --------------------------------------------------------------------------------