A dribbble design made by Jaroslav Getman turned into HTML and CSS. https://dribbble.com/shots/2342992-007-Settings
A Pen by Anthony Koch on CodePen.
Created
March 18, 2022 11:23
-
-
Save lucylow/17f2ea4d8992e2cd8007e8fa5e4d40f1 to your computer and use it in GitHub Desktop.
Settings Page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //- https://dribbble.com/shots/2342992-007-Settings | |
| - var sidebarIcons = ['ion-person-stalker', 'ion-music-note', 'ion-image', 'ion-android-film', 'ion-social-dribbble-outline', 'ion-levels']; | |
| - var navigationItems = ['Profile', 'Password', 'Notifications', 'Sync', 'Advanced']; | |
| - var detailOptionItems = [{src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png', title: 'Google Drive', body: 'Configure to sync design and code files from Google Drive', }, {src: '', title: 'Dropbox Sync', body: 'Configure to sync design and code files from Dropbox', }, {src: 'https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png', title: 'Adobe Creative Cloud', body: 'Configure to sync design and code files from Adobe Creative Cloud', }, {src: 'https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png', title: 'Box', body: 'Configure to sync design and code files from Box', }, {src: 'https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png', title: 'iCloud', body: 'Configure to sync design and code files from iCloud', }, ]; | |
| - var checkboxId = 0; | |
| - var checked = false; | |
| mixin detailsOption(src, title, body) | |
| li.Details__options-list__item | |
| .Media | |
| .Media__side.Media__side--left | |
| - var id = title.toLowerCase().replace(/\s+/, '-'); | |
| img.Media__image(id=id, src=src, alt="") | |
| .Media__body.Media.u-flex-center--v | |
| div | |
| h3=title | |
| p=body | |
| div.Media__side.Media__side--right | |
| - checkboxId++ | |
| if checkboxId == 1 || checkboxId == 4 | |
| - checked = true | |
| else | |
| - checked = false; | |
| input.checkbox-input(id="DetailsOptionCheckbox" + checkboxId, checked=checked, type="checkbox") | |
| label.checkbox.ion-ios-checkmark-empty(for="DetailsOptionCheckbox" + checkboxId) | |
| .wrapper | |
| aside.Sidebar | |
| nav.Sidebar__nav(role="navigation") | |
| ul.Sidebar__nav-list | |
| each icon, index in sidebarIcons | |
| if index < sidebarIcons.length - 1 | |
| li(class="Sidebar__nav-list__item " + icon) | |
| else | |
| li(class="Sidebar__nav-list__item Sidebar__nav-list__item--active " + icon) | |
| section.Details | |
| header.Details__header | |
| h1.Details__title Settings | |
| nav.Details__nav(role="navigation") | |
| ul.Details__nav-list | |
| each item in navigationItems | |
| if item == 'Sync' | |
| li.Details__nav-list__item.Details__nav-list__item--active=item | |
| else | |
| li.Details__nav-list__item=item | |
| .Details__body | |
| ul.Details__options-list | |
| each item in detailOptionItems | |
| +detailsOption(item.src, item.title, item.body) | |
| button#sync.Button.Button--sync | |
| span.a-spin.ion-loop |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * https://dribbble.com/shots/2342992-007-Settings | |
| */ | |
| const dropboxURI = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGsAAABkCAYAAACB6c7ZAAARdUlEQVR4Xt2deXRc9XXHP783El5ICA4BrBkJQmhSCM1J0tKU5mQ5NG2a5WAWYxOcEFaDV4zxghctTxp5IyEGjI0xSyAUUkII0EB7TkjT0AaSFChpUzCE9hiwZiQM2JTFYEvzbs99oxlJ1ozmrTMjz5/Svfd3f/f73u/9fnf7GWr1s1/+E6ThVhznQdKpdWCkVqp4Grct+3kstiF005W8yxNPxEQmYnmVxV36ZCNHN63EsArMhEGGO9nzzmw2fXRfZQE1oGjruQBjbgJzyODoD5LLzWdNS6aa2lQXLDv7p4jciphPlZjkYxjrLDqn7qqmAcYcyxYL+tbiyFWj6eQN4Eq6krdXa1WoDlgLX5jAEYe24aCTbhjDQC8iuWmkW35fc8CW9h3KZEeXu9PH1MXwMwyzsZMvx61z/GB19JyCWLcBJ3qczJvgzKKr+WGP9NGT2dljcHgA+LRH4W+BrKQruSXOtyw+sOzsZIQ0wiIg4XHSBbIcOMvoat7oky88ecfOzyDWA2CafAsz/JJc7lK6W17wzeuBIR6w2nZ+EWPdDOajHnQoT2LYRm92AdtO7g8lxytzW+YbGG4DM8krSwm6veC0sj11PfeaXAg5o1ijBcve9T6c3HqQeUA0so38AuPMwG7ZHeXER8oSQ3u2A0x7hHr/BmMuxE4+F5Xe0RhUtenIfBkxNwPHRKXckBz5Aw7T6E49H7nsxTsn8f7ErcC5kctG9oGksVIbsM1AWPnhwbJ3HI5MvAaRCyN7KkvOSvaAzKCr+Z/DTrrIb++aitOv36e/iExmaUFPYTmXYDf/Lsw44cBqzUzDQndAqTBKeOeVfkQuJ9281TtPGcq2zKcxRnd8MawEpcaUfixrLa+/vS7o4T8YWCt7jqDRug74ZmijBRNwHdublgT+gLdnTgfzd8D7gg0fgsvw38CFdCaf9CvFP1jtPTPA2gwc6XewiOn/CWvCN7CPeNOX3LbMcoxZB1i++KIlzmHM9zDvtWMf955X0d7B0vVdBjYjnOVVeBXonsGxTqN76o6KY9nPHIIcfhNiLqhIWz2C5xFmk07+m5chvYHV1vNt90nAHOFFaJVpdmExHTv5q7Lj2tkPIdyH8IUq6+ZlOAfYhNXQin3U22MxjA2W3dOMY+nH/OteRq0djexHZDbp5h+M0qE1eyIWDwEfqZ1+nkbeMbhj/EU56jJg6SGx9xLgu8BhnoaqByLDejqbNPSSj421Z/8WuAf4QD2o50EH1fsWrAlLS32LR4PV2nccVk5dRV/yILweSe5nr3Uek3MXgVHfol+/ZD3MaSc4cw90Zg+BpbGbXHYBxqypyZY2OhO9huQWYyUWIZwcndiaSLqDfmcJ65pf19HzYHX0fAyxbgE+XxOVohlUMHIHxizDTr7GDElwQnY+xqTH1VI+2hZ9wDy6kvcbOvqOQhw9qNX63BQGsu1YuXnYLb8cJaTj5SQ0XIdwdpgBas7rMD3/ZmnyipO4H8wf1VwpXwrIe4is4Y13v1PRhdPe83WwbgA+7GuImhO7c5xLuvn2oW/WipemMKHxboSv1Fw/bwo8gsnNo7Plf7yR60OZneyGQRznSjCNnvlqRigZxDqTdNMTQ9+sgjK6zn+8by0iy+L1oIea/SuIXEk6dXdgKW07P4GV2Irw2cAy4mY0/ArTMAP7KP1mub/S5yw3Ymo0xjM5bp18yHfQyLHZtxL7OM0sCvkTQ1tmNsasBzMlpLCo2W/C2nM59kn7hwsu78Gwez6FY91fF2u8kf/CkTmkm38dtVXcDRbONQjfily2b4GuJ2Yh6eZtpVjHdjflQyH3Aqf6HjcahndAOrGSG6OItI6pkp35axw2g/lYNKr7ltKHyNmkU4+V46zsyLWlAen9DsIVvocPw2DkIQbMAtYkXwojxhevvWMiTFyB46wYli3sS0QwYvktOWd6pQzfymAVRs+nEN8IZmIwhbxySQ+OWUR38ideOSKna838MZbOtQoripHbMfvneolreQdLLdLW++cY5ydgmiM3EOQwbOLdxnauPvKtGOT7FOluQM7DWOrMjsNhMIDIEtKp670q5g8slZoPQt6L8Dmvg3igewJhLunkUx5oq0ti7/wgktiAcHGEx5lXwTmHruZ/8TMZ/2C5gGnUdYq6cOb4GawE7ZsgrWxPbgmcTxFSAc/sWvJj0KXxJM88pQiN/I4Bc0aQb3EwsIa+Y5dizKZhpTDe52H4MQwsovOYrHemGlO65UpTl2Gs1YHOoIa7B4sY9gaZSTiw3Lcs81kccx8w1aMCL+Lk5tPd8o8e6euPzH7pI0ij5qN4dc3lEFlFOnV1mMmEB0tHX70zRcK6b+xkSenHmGswpLGTgZ6sMBONhbetZybGXDt2EYPsxnAunamfhdUhGrBUC63B+uDkrWWyhx5DcnProu4qrMUO5L/qfz/AxMndiJvfPzK9zc0RzJ3py9k8hn7RgVUYpD2zEDQTSovmZA8iK0inNE2gvmuGw4LolgolNLmoUNN1H1bDBZUylvwMGz1YOnp7z6lgzcZYV9RV2akfywShVW+Pk12MMYfR2dQe9QMaPVi6rXem3AAyHTFXkW66NWqlg9ixKjzqNLBkK0gDxjodu+nFKMeNFqxVLzbR0Kgbjb8cpuRjiLmMdNMzUSpeV7Ls1w9D9q9xI7rFbCp5HUQPvpFVvUQHlls7bNQVVaK88yDcCQ6dNXVHuBFMssQDpOW2V9HVfE0UD1c0YLVn1BWj4YVCX4tyuu3AyS0Y12eswsz0rOU0ak7HVz0AcSdv5S5jY8u7HmjLkoQDK5/svxExum31/huP3ovC7IJ7MZ4ix/QgbqbC0MHBWvXK0TTkNDX5i95RGkH5JiJtPJfcXPd+weKSF9o/uAvJzSTd8mgQmwUDyw2ViLqYWoIMOoLH8CQOc+rS415QNB8x3wBcFN7zLtp5YAldqU1+becfrPae88BsizgIqbGszZgJbb6L4/zO2Be9G9M6H2OpTy/amJYGHXfvnVMx33GYvt7Bqkp4XzI4cgXdzT/2ZdM4iPOlQlrhGWP+ibdwvr9vlhajOfwoXsVHWPxhLLMg6kOlJ0w1D0MmrM7nTlbc3XoSWYGoD4sZYxYDDgqo/GbVLiVtr9tO6JXsNVXrMOP28nCPIFVOIx87Bc3bm9WWmYVxG5HULtlTPdduzmD5FK3Qj3c+VUFzB2eFlhVGgJvEumfhgcmdY4M1lEa9PMzYEfIOVgTmVkTaFihfkzYHwxowh0eob3BRhscxDdOHp02XByufIPJDhC8HHzE2zl2Is4x06s7QzmFd3sXciJhTYtM2sGAtSHCmk2757XARI79ZbulPw4N1XyytzbdyzAvUy0mbgUmuAxFNWh2rUWVgU0fDKPsQ5pFOaa9G9zcEVmvP2VjW98dPiarsw7LWw3vrvSRIurNtzZ6BhXbGqVILoChgM5voyyzRTZZB123p1SaOK8OfzqNQzq8MeQGLedipn5fl1M6cgqbOneFXep3QP8pA4hxD/gx1e/33uqhotrsYSCxh7dGvFCndyG1mEVj2+FkxSs5zB5Z8a2gZzOeyf7dOu8hURCpP4La5W4mVuhnJfAbcDUSpTtce5dWczAGzGSuxSnM5DthguOeNG8fxcqHW1Vanc0HsMgHBmiPgTQF5ATEXD+/rVNqDUT+dz7zNa4jqLRxnFt3ND+F+p+TBcfhmle2YVt7dtLL3SBpFO7TUqqegX6BeQnKnjchNdHv2DmhfwbF7s/sdKS76fJ7hxXS2/HupISr7Bt3trtxQvW6dASyhp/7+xFkjNhcFMfXnjSkxQc1RYT27964ZK2RSGSwV7fbBPUTD9+fX4fb+Lva8c3FxkgrOidlWLHPPiM7PbZmL8lUgxftEAjwVsbA8jeVc5KV/rjewCjrG2mHatyEEnDa6UmuLridNZZ4w6Yf5JBZ5A8M5I3LM7ewXcNAI94d8jxY5g//O1P7Act+y1w/D2b820t7t/g2xF8c5f0SQMp9tpH0Fh1+jkQNZPCKE3vry8VgNP/Vx3YZ/7SpxGPkNxroYu+nZSqTD/+8frAK3myLtXlMU7lYEP9rmz1JZjDl9REPgSm+MYSu92cuLcTG3mGDSj2rgrNbbFNrZnro2SJJQcLDct8y9b2QNwsKq9PUz/AcMnDaiAC+fs6jtygt3W5WG/8CbF9xvW991IPN9Py9BGAz/Si53SZh7SsKBVfyW9ZwC1vcRTggyD48892Hx7WJtlxr7pN4NOCzxyK9v5QtYZtoBG495GKPO3bg88G+DrIjiBqBowMrvGCfChFYPd2R5t22eUjCso7OptbiRWP7q+5nYrxuJAL173UvKZtKVeqSoSD6cf0/kAUi9W2uAS8MkdkbzzSpn8o7sySA3R+M5cHdMs+lqvrM4nN37YRz5B+ATflEfRq9tDRaRTm0Zkps9AcdtfHx8CLmDrO4DsZSupN4YFFldWnRv1vAZaorx1CYtkg7TqWUXlpyJnXp8mEE/N7j1Piq8QfXEKFswyUXFVkP5ZE7d2gfNMtaF4KfknLmVusUE0T8esAqa5G9M1W+Z3161v89/W4bVN42+JDPIfEfzGH7Ovv6ZrD92j/vPfH2ZvnG6cfHx0xIfsyjOm1bjBcud/GA1IHR5zOJ9GGvCrGJmbj44qjvOFT4s55f0eRw5fUSaQHtG8wb1Ggwv3avvxVgL4q7yjB+s4lvmfhO0NVv5psmGjTzbtKx4BqmqI1b2YDFzRMS5PXMaGG1CWe6CmT7ILaCrRZfO2H/xgaXFdWbSsyNy193Ur8zlGEs7Qg8zQIkkx9XZY0nIg2A+GbsVhgYYvfFo6/kkxtIkomMP0ONO+p3FhTbexf+p47s7qVc9Rf6LD6z2jAb/LirVTB630b+jnUJPBdmNJTOwm4eudcg3QtGuaEdHPmMvAg/ceGh5U+PAA/m0NcmAXDbqttd8SEnPa+fSlYzFrrEIde2RB6tj0DYjmsnn/zZYoWHxOJ3NfyjasD37TZBbPH7fvJg+KM0jWPtmFlu86jky1ziHxKTbRlW6HBisHedgqcGKzeRLW08MHb3ddZVlZXiOXG5aWRdRuWuqDgKwChjdS7+Zz7qmV4ug5W/b1oPvmUFfg/j4SizT7srhrgDXlUwwOojA0qkqUIvdM8nqTAsJox9wr7dtx4dLWcnD7pp0+1QlbhrT1XWQgZU3i/bBFf4s0G3bNYAMNHApX6roQxx3YGkvIxJ3xOyJrw1kY72B2vmtM6nZzZH/4tsNqqraKW3KpKVgrappjVfkZish0I2XWQv9Rn/9qBYvWAVN9IDbwPfq7HJPP3Yag1bLc1hKOvX3EQksK6Y6YBWGt7NfwUG7skQQhojbNBXlD7gVKXsbO6vVLbu6YOn83cPlIcsxbvhkUkWT1CfBo1gDC7CP0XvHqvarPliFqanLKSHXIjKtarMNPZD0gllGV9PdUQYVvapVO7AKGuY92+pTO86r0jWgG8CwhffebWfD8f9Xg/HdIWsPlmqxeOckDmtYgTjL68AnOBILvcfKcRaQbv7PWoFUGLc+wCoujS8fT6LheoSv1dowwC5wltOV+kEtlrxS868vsIqgZc/CQpsiHxhDqgaGOTBb2b+/rRjqr8aoHsaoT7DcXaPez8gqHFlapbY8Grb5NcJ80qmnPdiu6iT1C1bBFPk7lPVs9jcxWuc198HoatI4WmSpY1HrW/9gFXeNPTPA0l6z4XscDllx8B7J3OpIO9dEjdKgvPEDliqsca9DnVb33qnwV9c+gWHeiAKHmIwcldjxBVZh1nbvxxFnE2L+yr8hZDciq0mktmEbxz9/7TjGJ1gFe7lX9KLtIFIeTKjA3IrFKuykfqPG3W98g6Xm1iKFyf0dOCwaoxLkacSZH8vVuVWEfPyDVVwa3SZhumsclqeuTUxoY3tya5DitSri4Gmogwcsd7piaO+dBXI1Wm5D4qq4U5o9WTkiooMMrEGraH69bQYislHdiPl/AdzpfeHg+QwAAAAASUVORK5CYII=`; | |
| document.querySelector('#dropbox-sync').src = dropboxURI; | |
| [ | |
| { | |
| src: 'https://upload.wikimedia.org/wikipedia/commons/9/9b/Logo_of_Google_Drive.png', | |
| title: 'Google Drive', | |
| body: 'Configure to sync design and code files from Google Drive', | |
| }, | |
| { | |
| icon: 'ion-social-dropbox', | |
| title: 'Dropbox Sync', | |
| body: 'Configure to sync design and code files from Dropbox', | |
| }, | |
| { | |
| src: 'https://upload.wikimedia.org/wikipedia/en/8/88/Adobe_Creative_Cloud_Logo.png', | |
| title: 'Adobe Creative Cloud', | |
| body: 'Configure to sync design and code files from Adobe Creative Cloud', | |
| }, | |
| { | |
| src: 'https://upload.wikimedia.org/wikipedia/commons/0/00/Box_cyan.png', | |
| title: 'Box', | |
| body: 'Configure to sync design and code files from Box', | |
| }, | |
| { | |
| src: 'https://upload.wikimedia.org/wikipedia/en/f/f0/ICloud_logo_%28new%29.png', | |
| title: 'iCloud', | |
| body: 'Configure to sync design and code files from iCloud', | |
| }, | |
| ] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Edit 2022: fixed randomly broken css | |
| // sidebar menu background | |
| $sidebar-background: #2d3139; | |
| // checkmark blue | |
| $blue: #00baff; | |
| // blue | |
| $body-background: #0b9fed; | |
| $foreground: rgba(black, 0.7); | |
| // light gray | |
| $foreground--light: #b0b0b2; | |
| // blue | |
| $link-color--active: #0674d7; | |
| // blue | |
| $link-color--hover: $link-color--active; | |
| // checkmark untoggled | |
| $checkmark-gray: #e6e6e6; | |
| $details-pane-background: #f7f9fa; | |
| $details-body-gutter: 60px; | |
| $headings: (h1, h2, h3, h4, h5, h6); | |
| $checkbox-expand: 4px; | |
| body { | |
| color: $foreground; | |
| background-color: $body-background; | |
| font-family: Open Sans; | |
| line-heihgt: 1.5; | |
| margin: 0; | |
| } | |
| ul { | |
| padding: 0; | |
| margin: 0; | |
| list-style-type: none; | |
| } | |
| a { | |
| text-decoration: none; | |
| &:link, | |
| &:visited { | |
| color: $foreground--light; | |
| } | |
| &:hover, | |
| &:active { | |
| color: $link-color--hover; | |
| } | |
| } | |
| p { | |
| font-size: 14px; | |
| margin-bottom: 0; | |
| } | |
| #{$headings} { | |
| font-weight: 300; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .wrapper { | |
| $width: 810px; | |
| display: flex; | |
| padding: 80px 20px; | |
| max-width: $width; | |
| min-width: $width; | |
| margin: 0 auto; | |
| } | |
| // Sidebar to the left | |
| .Sidebar { | |
| align-items: center; | |
| background-color: $sidebar-background; | |
| border: 1px solid rgba(black, 0.1); | |
| border-radius: 4px; | |
| box-shadow: -5px 0px 60px 0 rgba(black, 0.6), inset 0 0 40px rgba(black, 0.1); | |
| display: flex; | |
| margin: 60px 0; | |
| } | |
| .Sidebar__nav-list { | |
| align-items: center; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .Sidebar__nav-list__item { | |
| color: rgba(white, 0.3); | |
| cursor: pointer; | |
| font-size: rem(28px); | |
| padding: 20px 30px; | |
| text-align: center; | |
| &:hover { | |
| color: white; | |
| } | |
| &--active { | |
| color: white; | |
| } | |
| } | |
| // The the content area | |
| /** | |
| * 1. z-indexed over the sidebar so the sidebar's shadow | |
| * doesn't show over the main content area | |
| */ | |
| .Details { | |
| background-color: white; | |
| border-radius: 4px; | |
| box-shadow: -5px 0px 70px 0 rgba(black, 0.4); | |
| flex: 1; | |
| position: relative; | |
| z-index: 1; /* [1] */ | |
| } | |
| .Details__header { | |
| padding: 30px; | |
| } | |
| .Details__title { | |
| color: rgba(black, 0.8); | |
| font-size: 28px; | |
| font-weight: 300; | |
| letter-spacing: 1px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| } | |
| .Details__nav { | |
| padding: 0 $details-body-gutter; | |
| } | |
| .Details__nav-list { | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .Details__nav-list__item { | |
| border-bottom: 2px solid transparent; | |
| color: $foreground--light; | |
| cursor: pointer; | |
| padding-bottom: 30px; | |
| position: relative; | |
| text-align: center; | |
| user-select: none; | |
| &:hover { | |
| border-color: $link-color--hover; | |
| } | |
| &--active { | |
| border-color: $link-color--active; | |
| } | |
| } | |
| .Details__body { | |
| background: $details-pane-background; | |
| padding: 50px $details-body-gutter; | |
| border-radius: 4px; | |
| } | |
| .Media { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 25px; | |
| } | |
| .Media__side { | |
| vertical-align: middle; | |
| &--left { | |
| margin-right: 30px; | |
| } | |
| &--right { | |
| margin-left: 30px; | |
| } | |
| } | |
| .Media__image { | |
| $width: 55px; | |
| width: 100%; | |
| max-width: $width; | |
| } | |
| .Media__body { | |
| flex: 1; | |
| } | |
| .checkbox { | |
| $width: 20px; | |
| $height: 20px; | |
| background-color: $checkmark-gray; | |
| border-radius: 50%; | |
| display: inline-block; | |
| position: relative; | |
| text-align: center; | |
| vertical-align: middle; | |
| width: $width; | |
| height: $height; | |
| &:before { | |
| background-color: $blue; | |
| border-radius: 50%; | |
| color: white; | |
| font-size: 32px; | |
| line-height: $height + ($checkbox-expand * 2); | |
| opacity: 0; | |
| transition: all 0.1s ease-in; | |
| position: absolute; | |
| height: 100%; | |
| width: 100%; | |
| } | |
| } | |
| // Hide the checkboxes | |
| .checkbox-input { | |
| display: none; | |
| } | |
| .checkbox-input:checked + .checkbox:before { | |
| opacity: 1; | |
| position: absolute; | |
| left: -$checkbox-expand; | |
| top: -$checkbox-expand; | |
| right: -$checkbox-expand; | |
| bottom: -$checkbox-expand; | |
| } | |
| // Base button style | |
| .Button { | |
| border-radius: 3px; | |
| border: 0; | |
| box-shadow: 0 2px 4px 0 rgba(black, 0.1), 0 10px 20px 0 rgba(black, 0.1); | |
| color: white; | |
| cursor: pointer; | |
| display: inline-block; | |
| font-weight: 500; | |
| font-size: 13px; | |
| letter-spacing: 1px; | |
| outline: 0; | |
| padding: 16px 36px; | |
| position: relative; | |
| text-align: center; | |
| text-transform: uppercase; | |
| transition: box-shadow 0.15s, background-color 0.15s; | |
| user-select: none; | |
| vertical-align: middle; | |
| will-change: box-shadow, background-color, color; | |
| // Sync button | |
| &--sync { | |
| $width: 70px; | |
| $height: $width; | |
| background-color: $blue; | |
| border-radius: 50%; | |
| color: white; | |
| font-size: 32px; | |
| line-height: $height; | |
| text-align: center; | |
| padding: 0; | |
| width: $width; | |
| height: $height; | |
| > span { | |
| line-height: $height; | |
| } | |
| } | |
| } | |
| #sync { | |
| bottom: 0; | |
| position: absolute; | |
| right: 0; | |
| transform: translate(-50%, 50%); | |
| } | |
| // Helpers | |
| .u-flex { | |
| display: flex; | |
| flex-wrap: wrap; | |
| } | |
| .u-flex-center--v { | |
| display: flex; | |
| align-items: center; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment