harunpehlivan
3/6/2018 - 3:17 PM
Settings Page
Settings Page
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
@import "bourbon"
$sidebar-background: #2D3139 // sidebar menu background
$blue: #00BAFF // checkmark blue
$body-background: #0B9FED // blue
$foreground: rgba(black, 0.7)
$foreground--light: #B0B0B2 // light gray
$link-color--active: #0674D7 // blue
$link-color--hover: $link-color--active // blue
$checkmark-gray: #E6E6E6 // checkmark untoggled
$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
+size($width $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, 0)
// Hide the checkboxes
.checkbox-input
display: none
.checkbox-input:checked + .checkbox:before
opacity: 1
+position(absolute, -$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
+size($width $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
Settings Page
A dribbble design made by Jaroslav Getman turned into HTML and CSS. https://dribbble.com/shots/2342992-007-Settings
A Pen by HARUN PEHLİVAN on CodePen.
/*
* 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',
},
]//- 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