beginning of theming

src/css/AccountPage.styl

@@ -42,6 +42,15 @@ settingText()
   width 30px
 
 .account
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__userinformation
     display flex
     justify-content center
@@ -60,10 +69,10 @@ settingText()
     &__name
       font-size 22px
     &__email
-      color blue
+      color thirdColor
     &__company
       font-size 20px
-      color blue
+      color thirdColor
   &__delimiter
     position relative
     top 3px
@@ -104,7 +113,7 @@ settingText()
           &:hover
             background-color lightGrey
           &.active
-            background-color blue
+            background-color thirdColor
             color white
     &__setting
       border-radius 10px
@@ -123,11 +132,11 @@ settingText()
           &__txtinput
             display block
             width auto
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
           &__button
             vertical-align top
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
             padding 8px 25px
             cursor pointer
@@ -145,22 +154,22 @@ settingText()
         &__timezone
           margin 15px 0 30px 0
           &__btn
-            border 1px solid blue
+            border 1px solid thirdColor
             border-radius 5px
             padding 10px 35px
-            color blue
+            color thirdColor
             background-color transparent
             &::after
               margin-left 10px
             &:hover, &:focus
-              background-color blue
+              background-color thirdColor
               color white
           &__submenu
             max-height 265px
             overflow-Y auto
             &__item
               &:hover, &:focus
-                background-color blue
+                background-color thirdColor
                 color white
       .notification
         &__text

src/css/Dashboard.styl

@@ -4,21 +4,21 @@ flexwrap()
 
 btnNotification()
   margin 20px 0
-  border 1px solid blue
+  border 1px solid thirdColor
   padding 10px 15px
 
 hoverfocus()
-  background-color blue
+  background-color thirdColor
   color white
 
 bgandcolor()
   background-color transparent
-  color blue
+  color thirdColor
 
 label()
   font-weight 500
   font-size 18px
-  color blue
+  color thirdColor
 
 coloricon()
   .fa-gavel
@@ -32,6 +32,25 @@ coloricon()
 
 .dashboard
   margin-left 20px
+  .btn-primary
+    background-color thirdColor
+    color off-white
+    border-color secondColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color secondColor
+      background-color secondColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__header
     flexwrap()
     align-items center
@@ -51,7 +70,7 @@ coloricon()
       margin-bottom 20px
       font-size 40px
       font-weight 500
-      color darkBlue
+      color darkthirdColor
     &__detail
       margin-bottom 20px
       font-size 18px
@@ -132,11 +151,11 @@ coloricon()
       padding 15px
       cursor pointer
       &:hover
-        background-color folder-hover
+        background-color fourthColor
       &:nth-child(even)
         background-color grey-hover
         &:hover
-          background-color folder-hover
+          background-color fourthColor
       &__icon
         margin 0 25px
         font-size 25px
@@ -172,13 +191,13 @@ coloricon()
         border-bottom 1px solid grey
         padding 10px 15px
         &:hover
-          background-color folder-hover
+          background-color fourthColor
         &:nth-last-child(1)
           border-bottom 0
         &:nth-child(even)
           background-color grey-hover
           &:hover
-            background-color folder-hover
+            background-color fourthColor
         &__avatar
           margin-right 20px
           & > img
@@ -191,7 +210,7 @@ coloricon()
             font-size 18px
         &__delete
           font-size 20px
-          color blue
+          color thirdColor
           cursor pointer
     &__btnadd
       border-top 1px solid grey
@@ -214,7 +233,7 @@ coloricon()
             font-size 25px
         &__text
           font-size 18px
-          color blue
+          color thirdColor
           cursor pointer
     &__form
       padding 15px

src/css/ExtandedAction.styl

@@ -1,4 +1,13 @@
 .extandedaction
+  .btn-outline-primary
+    color thirdColor
+    border-color thirdColor
+    &:hover, &:focus, &:active
+      color off-white
+      border-color thirdColor
+      background-color thirdColor
+      box-shadow 0 0 1px 2px fifthColor
+      outline fifthColor
   &__subdropdown
     margin 0
     padding 0

src/css/FileItem.styl

@@ -1,8 +1,3 @@
-iconrules()
-  display inline-block
-  margin-right 10px
-  font-size 20px
-
 .currentColor
   color currentColor
 
@@ -21,7 +16,7 @@ iconrules()
   border-bottom 0
   cursor pointer
   &:hover
-    background-color files-hover
+    background-color fourthColor
   &__type
     font-size 30px
     text-align center
@@ -32,19 +27,6 @@ iconrules()
     &__text
       margin-right 10px
       font-size 17px
-    &__icons
-      &__download
-        iconrules()
-        &:hover, &:focus
-          color blue
-      &__archive
-        iconrules()
-        &:hover, &:focus
-          color blue
-      &__delete
-        iconrules()
-        &:hover, &:focus
-          color blue
   &__status
     &__text
       font-size 20px

src/css/Folder.styl

@@ -1,6 +1,6 @@
 // -----------------------------------------------------
 // border management for Workspace container
-border-style = 1px solid darkBlue
+border-style = 1px solid secondColor
 .folder__header
   border border-style
 .folder + .file, .file + .file
@@ -16,6 +16,9 @@ border-style = 1px solid darkBlue
 // @Info: the very last line of file or folder has it's border bottom added in js
 // -----------------------------------------------------
 
+.folder.active > .folder__content > .file, .folder.active > .folder__content > .extandedaction
+  padding-right 7px
+
 folderclose()
   height 0
   visibility hidden
@@ -55,9 +58,9 @@ folderopen()
     background-color lightGrey
     cursor pointer
     &:hover
-      background-color folder-hover
+      background-color fourthColor
       .folder__header__triangleborder__triangle
-        border-color folder-hover transparent transparent transparent
+        border-color fourthColor transparent transparent transparent
     &__triangleborder
       display none
       position absolute
@@ -65,7 +68,7 @@ folderopen()
       left -1px
       border-style solid
       border-width 25px 30px 0 30px
-      border-color darkBlue transparent transparent transparent
+      border-color secondColor transparent transparent transparent
       z-index 1
       &__triangle
         display none
@@ -79,7 +82,7 @@ folderopen()
       display flex
       &__icon
         font-size 25px
-        color darkBlue
+        color darkGrey
         text-align center
       &__text
         margin 0 15px 0 0
@@ -88,7 +91,7 @@ folderopen()
         overflow hidden
         width 400px
         font-size 17px
-        color darkBlue
+        color darkGrey
       &__button
         &__advancedbtn
           position relative
@@ -100,6 +103,14 @@ folderopen()
           .addbtn
             &__text
               font-size 17px
+              color thirdColor
+              border-color thirdColor
+              &:hover, &:focus, &:active
+                color off-white
+                border-color thirdColor
+                background-color thirdColor
+                box-shadow 0 0 1px 2px fifthColor
+                outline fifthColor
               &::after
                 margin-left 20px
             &__subdropdown

src/css/Generic.styl

@@ -3,6 +3,35 @@
   &__content
     height 100%
 
+.btn-outline-primary
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color thirdColor
+    background-color thirdColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.btn-outline-primary.dropdown-toggle
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color thirdColor
+    background-color thirdColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.btn-primary
+  &:hover, &:focus, &:active, &:visited
+    color off-white
+    border-color secondColor
+    background-color secondColor
+    box-shadow 0 0 1px 2px fifthColor
+    outline fifthColor
+
+.dropdown-item
+  &:hover, &:focus, &:active, &:visited
+    background-color fourthColor
+    color off-white
+
 .sidebarpagecontainer
   display flex
   padding-top 88px
@@ -112,7 +141,7 @@
 .subTitle
   font-size 20px
   font-weight 500
-  color blue
+  color thirdColor
 
 .btnaction
   display flex
@@ -131,13 +160,13 @@
   &__btn
     display flex
     margin-bottom 30px
-    border 1px solid blue
+    border 1px solid thirdColor
     border-radius 10px
     padding 15px 25px
-    color blue
+    color thirdColor
     cursor pointer
     &:hover, &:focus
-      background-color blue
+      background-color thirdColor
       color white
     &__icon
       margin-right 20px

src/css/Header.styl

@@ -2,7 +2,6 @@
   position fixed
   width 100%
   box-shadow shadow-bottom
-  background mainColor
   z-index 5
   &__logo
     &__img

src/css/Sidebar.styl

@@ -50,7 +50,7 @@ leftside()
     border-bottom-right-radius 15px
     padding 8px 15px
     cursor pointer
-    background-color blue
+    background-color thirdColor
     color white
     transition all sidebar-animate-speed
   &__btnnewworkspace
@@ -70,13 +70,13 @@ leftside()
         &__wrapper
           display flex
           align-items center
-          border-bottom 1px solid darkBlue
+          border-bottom 1px solid secondColor
           width 100%
           height 100%
-          background-color blue
+          background-color thirdColor
           cursor pointer
           &:hover
-            background-color darkenBlue
+            background-color fifthColor
         &__number
           leftside()
           padding 12px
@@ -103,12 +103,12 @@ leftside()
           &__dropdown
             display flex
             align-items center
-            border-top 1px solid darkBlue
+            border-top 1px solid secondColor
             cursor pointer
             &:nth-last-child(1)
-              border-bottom 1px solid darkBlue
+              border-bottom 1px solid secondColor
             &:hover
-              background-color lightBlue
+              background-color thirdColor
             &__showdropdown
               display flex
               justify-content space-between

src/css/Variable.styl

@@ -4,9 +4,10 @@
 /*** COULEURS ****/
 
 mainColor = #fdfdfd // Bg header
-secondColor = #215e8e // bg sidebar
-thirdColor = #2571fe // bg workspace name
-fourthColor = #82b2cc // bg filter sidebar
+secondColor = #7d4e24 // #7d4e24 bg sidebar
+thirdColor = lighten(secondColor, 25%) // #2571fe bg workspace name
+fourthColor = lighten(secondColor, 55%) // #82b2cc bg filter sidebar
+fifthColor = lighten(secondColor, 10%)
 
 fontColor = #252525
 

src/css/btnSwtich.styl

@@ -39,7 +39,7 @@ input:checked + .slider
   background-color blue
 
 input:focus + .slider
-  box-shadow 0 0 1px blue
+  box-shadow 0 0 1px thirdColor
 
 input:checked + .slider:before
   -webkit-transform translateX(26px)