integration of the account page

src/container/AccountPage.jsx

@@ -0,0 +1,413 @@
+import React, { Component } from 'react'
+import imgProfil from '../img/imgProfil.png'
+
+class AccountPage extends Component {
+  render () {
+    return (
+      <div className='container-fluid nopadding'>
+        <div className='account'>
+          <div className='account__title ml-5'>
+            Mon Compte
+          </div>
+
+          <div className='account__userinformation mr-5 ml-5 mb-5'>
+            <div className='account__userinformation__avatar'>
+              <img src={imgProfil} alt='avatar' />
+            </div>
+            <div className='account__userinformation__wrapper'>
+              <div className='account__userinformation__name mb-3'>
+                Alexi Cauvin
+              </div>
+              <div className='account__userinformation__email mb-3'>
+                alexi.cauvin@algoo.fr
+              </div>
+              <div className='account__userinformation__role mb-3'>
+                Utilisateur
+              </div>
+              <div className='account__userinformation__job mb-3'>
+                Integrateur | Webdesigner
+              </div>
+              <div className='account__userinformation__company'>
+                Algoo
+              </div>
+            </div>
+          </div>
+
+          <div className='account__delimiteur' />
+
+          <div className='account__userpreference'>
+
+            <nav className='account__userpreference__menu navbar d-flex align-items-start'>
+
+              <div className='account__userpreference__menu__responsive d-lg-none'>
+                <div className='account__userpreference__menu__responsive__burger' />
+                <div className='account__userpreference__menu__responsive__burger' />
+                <div className='account__userpreference__menu__responsive__burger' />
+              </div>
+
+
+              <ul className='account__userpreference__menu__list nav flex-column'>
+
+                <div className='account__userpreference__menu__list__close nav-link'>
+                  <i className='fa fa-times' />
+                </div>
+
+                <div className='account__userpreference__menu__list__disabled'>Menu
+                </div>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Informations Compte</div>
+                </li>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Calendrier</div>
+                </li>
+                <li className='account__userpreference__menu__list__item nav-item'>
+                  <div className='account__userpreference__menu__list__item__link nav-link'>Notifications</div>
+                </li>
+              </ul>
+            </nav>
+
+            <div className='account__userpreference__setting'>
+
+              <div className='account__userpreference__setting__personaldata d-none'>
+                <div className='account__userpreference__setting__personaldata__title'>
+                  Mes informations personnelles
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__text'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__changeinfo'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
+                    Changer le mot de passe :
+                  </div>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Ancien mot de passe' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='password' placeholder='Nouveau mot de passe' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
+                    Envoyer
+                  </div>
+                </div>
+
+                <div className='account__userpreference__setting__personaldata__changeinfo'>
+                  <div className='account__userpreference__setting__personaldata__changeinfo__subtitle'>
+                    Changer d'adresse mail :
+                  </div>
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Ancienne adresse mail' />
+                  <input className='account__userpreference__setting__personaldata__changeinfo__txtinput' type='email' placeholder='Nouvelle adresse mail' />
+                  <div className='account__userpreference__setting__personaldata__changeinfo__button btn'>
+                    Envoyer
+                  </div>
+                </div>
+              </div>
+
+              <div className='account__userpreference__setting__calendar d-none'>
+
+                <div className='account__userpreference__setting__calendar__title'>
+                  Calendrier
+                </div>
+
+                <div className='account__userpreference__setting__calendar__text'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='account__userpreference__setting__calendar__subtitle'>
+                  Accèder à votre Calendrier personnel
+                </div>
+                <div className='account__userpreference__setting__calendar__link'>
+                  http://algoo.trac.im/caldav/user/262.ics/
+                </div>
+
+                <div className='account__userpreference__setting__calendar__subtitle'>
+                  Changer de Fuseau Horaire :
+                </div>
+
+                <div className='account__userpreference__setting__calendar__timezone dropdown'>
+                  <button className='account__userpreference__setting__calendar__timezone__btn btn dropdown-toggle' type='button' id='dropdownMenuButton' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
+                    Fuseau Horaire
+                  </button>
+                  <div className='account__userpreference__setting__calendar__timezone__submenu dropdown-menu'>
+                    <div className='account__userpreference__setting__calendar__timezone__submenu__item dropdown-item'> Paris GMT +1
+                    </div>
+                    <div className='account__userpreference__setting__calendar__timezone__submenu__item dropdown-item dropdown-item'> Londres GMT +0
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className='account__userpreference__setting__notification'>
+
+                <div className='account__userpreference__setting__notification__title'>
+                  Mes Espaces de Travail
+                </div>
+
+                <div className='account__userpreference__setting__notification__text'>
+                  Ut consectetur dolor et sunt nisi officia ut magna. Ut consectetur dolor et sunt nisi officia ut magna.
+                  Ut consectetur dolor et sunt nisi officia ut magna.
+                </div>
+
+                <div className='container-fluid'>
+                  <div className='account__userpreference__setting__notification__table'>
+                    <div className='account__userpreference__setting__notification__table__header'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Espace de Travail
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-center'>
+                            Role
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch text-right'>
+                            Notifiaction
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className='account__userpreference__setting__notification__table__line'>
+                      <div className='row'>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__workspace'>
+                            Workspace 1
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__role justify-content-sm-center'>
+                            <div className='account__userpreference__setting__notification__table__role__icon'>
+                              <i className='fa fa-graduation-cap' />
+                            </div>
+                            <div className='account__userpreference__setting__notification__table__role__text'>
+                              Gestionnaire de contenu
+                            </div>
+                          </div>
+                        </div>
+                        <div className='col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4'>
+                          <div className='account__userpreference__setting__notification__table__btnswitch d-flex justify-content-sm-end'>
+                            <div className='account__userpreference__setting__notification__table__btnswitch__switcher'>
+                              <label className='switch nomarginlabel'>
+                                <input type='checkbox' />
+                                <span className='slider round' />
+                              </label>
+                              <div className='account__userpreference__setting__notification__table__btnswitch__switcher__text'>
+                                On
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default AccountPage

src/container/Tracim.jsx

@@ -5,6 +5,7 @@ import Header from './Header.jsx'
 import Sidebar from './Sidebar.jsx'
 import Login from './Login.jsx'
 import Dashboard from './Dashboard.jsx'
+import AccountPage from './AccountPage.jsx'
 import WorkspaceContent from './WorkspaceContent.jsx'
 import {
   Route,
@@ -44,7 +45,7 @@ class Tracim extends React.Component {
 
               <SidebarWrapper locationPath={location.pathname}>
 
-                <PrivateRoute exact path='/' component={Dashboard} />
+                <PrivateRoute exact path='/' component={AccountPage} />
 
               </SidebarWrapper>
 

src/css/AccountPage.styl

@@ -0,0 +1,317 @@
+.nopadding
+  padding 0
+
+.nomarginlabel
+  margin-bottom 0
+
+settingTitle()
+  margin 15px 0 15px 15px
+  font-size 20px
+  font-weight 500
+  color blue
+
+settingText()
+  margin 15px 0 15px 15px
+  font-size 18px
+
+.account
+  &__title
+    margin 20px 0
+    font-size 35px
+  &__userinformation
+    display flex
+    justify-content center
+    align-items center
+    flex-wrap wrap
+    border 1px solid grey
+    padding 25px
+    font-size 18px
+    &__wrapper
+      flex-direction column
+    &__avatar
+      margin-right 50px
+      img
+        width 150px
+        height 150px
+    &__name
+      font-size 22px
+    &__email
+      color blue
+    &__company
+      font-size 20px
+      color blue
+  &__delimiteur
+    position relative
+    top 3px
+    left calc(50% - 250px) // 250px => width / 2
+    border-radius 10px
+    width 500px
+    height 5px
+    background-color blue
+  &__userpreference
+    display flex
+    padding 25px
+    width 100%
+    background-color lightGrey
+    &__menu
+      margin-right 30px
+      border-radius 10px
+      padding 0
+      width 20%
+      min-height 600px
+      background-color off-white
+      &__responsive
+        &__burger
+          margin-bottom 3px
+          border-radius 10px
+          width 35px
+          height 4px
+          background-color blue
+          cursor pointer
+      &__list
+        width 100%
+        margin-bottom 20px
+        &__close
+          display none
+          justify-content flex-end
+          margin 10px 0 15px 0
+          font-size 20px
+          cursor pointer
+        &__disabled
+          margin 10px 0 0 15px
+          color grey
+          font-size 18px
+        &__item
+          margin-top 10px
+          font-weight 500
+          font-size 18px
+          cursor pointer
+          &:hover
+            background-color blue
+            color white
+    &__setting
+      border-radius 10px
+      width 80%
+      min-height 600px
+      background-color off-white
+      &__personaldata
+        &__title
+          settingTitle()
+        &__text
+          settingText()
+        &__changeinfo
+          margin 25px 0 25px 15px
+          &__subtitle
+            margin-bottom 15px
+            font-size 18px
+          &__txtinput
+            margin 0 15px 15px 0
+            border 1px solid blue
+            border-radius 10px
+            padding 8px 15px
+          &__button
+            vertical-align top
+            border 1px solid blue
+            border-radius 10px
+            padding 10px 25px
+            &:hover, &:focus
+              background-color blue
+              color white
+      &__calendar
+        &__title
+          settingTitle()
+        &__text
+          settingText()
+        &__subtitle
+          margin 15px 0 15px 15px
+          font-size 18px
+        &__link
+          margin-left 15px
+          border 1px solid grey
+          border-radius 10px
+          width 400px
+          padding 10px 25px
+        &__timezone
+          margin 15px 0 30px 15px
+          &__btn
+            border 1px solid blue
+            border-radius 10px
+            padding 10px 35px
+            color blue
+            background-color transparent
+            &::after
+              margin-left 10px
+            &:hover, &:focus
+              background-color blue
+              color white
+          &__submenu
+            max-height 300px
+            overflow-Y auto
+            &__item
+              &:hover, &:focus
+                background-color blue
+                color white
+      &__notification
+        margin 15px 15px 35px 15px
+        &__title
+          settingTitle()
+        &__text
+          settingText()
+          margin-bottom 30px
+        &__table
+          border 1px solid grey
+          &__header
+            border-bottom 1px solid grey
+            padding 10px 20px
+          &__line
+            border-bottom 1px solid grey
+            padding 10px 20px
+          &__workspace
+            font-size 18px
+            white-space nowrap
+            overflow hidden
+            text-overflow ellipsis
+          &__role
+            display flex
+            font-size 18px
+            &__icon
+              margin-right 10px
+              color gestionnaire
+          &__btnswitch
+            &__switcher
+              display flex
+              &__text
+                margin 5px 0 0 15px
+
+.account__userpreference__setting__notification__table__line:nth-last-child(1)
+  border-bottom 0
+
+
+/***** MEDIAQUERIES *****/
+
+
+/**** MEDIA 576px & 1199px ****/
+
+// Regroup the common rules
+
+@media (min-width: min-sm) and (max-width: max-md)
+
+  .account
+    &__userpreference
+      display block
+      position relative
+      &__menu
+        justify-content center
+        margin-bottom 25px
+        border-radius 30px
+        width 60px
+        min-height 60px
+        &__responsive
+          align-self center
+        &__list
+          display none
+      &__setting
+        padding 10px
+        width 100%
+
+  .activemenu
+    .account
+      &__userpreference
+        &__menu
+          justify-content start
+          position absolute
+          top 0
+          left 0
+          border-radius 10px
+          width 100%
+          height 100%
+          z-index 2
+          background-color rgbGrey
+          &__responsive
+            display none
+          &__list
+            display block
+            border-radius 10px
+            height 100%
+            background-color off-white
+            width 300px
+            &__close
+              display flex
+
+/***** MEDIA LG *****/
+
+@media (min-width: min-lg) and (max-width: max-lg)
+
+  .account
+    &__userpreference
+      padding 25px 10px
+      &__menu
+        margin-right 15px
+        width 25%
+
+/***** MEDIA XS *****/
+
+@media (max-width: max-xs)
+
+  .account
+    &__userinformation
+      &__avatar
+        margin 0 0 20px 0
+      &__wrapper
+        text-align center
+    &__userpreference
+      display block
+      position relative
+      padding 25px 0
+      &__menu
+        justify-content center
+        margin 0 0 25px 15px
+        border-radius 30px
+        width 60px
+        min-height 60px
+        &__responsive
+          align-self center
+        &__list
+          display none
+      &__setting
+        border-radius 0
+        padding 10px 0
+        width 100%
+        &__calendar
+          &__link
+            padding 10px 15px
+            width 345px
+        &__notification
+          &__table
+            &__header
+              display none
+            &__workspace
+              margin-bottom 20px
+            &__role
+              margin-bottom 20px
+            &__btnswitch
+              margin-bottom 20px
+
+  .activemenu
+    .account
+      &__userpreference
+        &__menu
+          justify-content start
+          position absolute
+          top 0
+          left 0
+          border-radius 10px
+          width 100%
+          height 100%
+          z-index 2
+          background-color rgbGrey
+          &__responsive
+            display none
+          &__list
+            display block
+            border-radius 10px
+            height 100%
+            background-color off-white
+            width 300px
+            &__close
+              display flex

src/css/Variable.styl

@@ -9,6 +9,7 @@ fourthColor = #82b2cc // bg filter sidebar
 fontColor = #252525
 
 darkGrey = #252525
+rgbGrey = rgba(25,25,25,0.3)
 grey = #ababab
 lightGrey = #f0f0f0
 grey-hover = #e0e0e0

src/css/btnSwtich.styl

@@ -0,0 +1,49 @@
+.switch
+  position relative
+  display inline-block
+  width 60px
+  height 34px
+
+.switch input
+  display none
+
+.slider
+  position absolute
+  cursor pointer
+  top 0
+  left 0
+  right 0
+  bottom 0
+  background-color #ccc
+  -webkit-transition .4s
+  transition .4s
+
+.slider:before
+  position absolute
+  content ""
+  height 26px
+  width 26px
+  left 4px
+  bottom 4px
+  background-color white
+  -webkit-transition .4s
+  transition .4s
+
+input:checked + .slider
+  background-color #2196F3
+
+input:focus + .slider
+  box-shadow 0 0 1px #2196F3
+
+input:checked + .slider:before
+  -webkit-transform translateX(26px)
+  -ms-transform translateX(26px)
+  transform translateX(26px)
+
+/* Rounded sliders */
+.slider.round
+  border-radius 34px
+
+.slider.round:before
+  border-radius: 50%
+

src/css/index.styl

@@ -23,3 +23,5 @@ html, body, #content, #content > div
 @import 'File'
 
 @import 'Dashboard'
+@import 'AccountPage'
+@import 'btnSwtich'