style: ununify styles

 Include box-shadow/text-shadow/border-radius.

Author: reco_luan

components/AlgoliaSearchBox.vue

@@ -60,6 +60,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 .algolia-search-wrapper
   & > span
     vertical-align middle
@@ -68,7 +69,7 @@ export default {
     .ds-dropdown-menu
       background-color #fff
       border 1px solid #999
-      border-radius 4px
+      border-radius $borderRadius
       font-size 16px
       margin 6px 0 0
       padding 4px

components/DropdownLink.vue

@@ -80,6 +80,8 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
+
 .dropdown-wrapper
   cursor pointer
   .dropdown-title
@@ -173,9 +175,9 @@ export default {
       right 0
       background-color #fff
       padding 0.6rem 0
-      box-shadow: 0 4px 20px 0 rgba(0,0,0,.2);
+      box-shadow: $boxShadow;
       text-align left
-      border-radius 0.25rem
+      border-radius $borderRadius
       white-space nowrap
       margin 0
 </style>

components/Home.vue

@@ -98,6 +98,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 @require '../styles/loadMixin.styl'
 
 .home {
@@ -127,7 +128,7 @@ export default {
       color: #fff;
       background-color: $accentColor;
       padding: 0.6rem 1.2rem;
-      border-radius: 4px;
+      border-radius: $borderRadius
       transition: background-color 0.1s ease;
       box-sizing: border-box;
       load-start()

components/HomeBlog.vue

@@ -185,6 +185,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
 @require '../styles/loadMixin.styl'
 
 .home-blog {
@@ -235,11 +236,12 @@ export default {
       margin-left 15px;
       flex 0 0 300px
       height auto;
-      box-shadow 0 2px 10px rgba(0,0,0,0.2);
+      box-shadow $boxShadow;
+      border-radius $borderRadius
       box-sizing border-box
       padding 0 15px
       &:hover {
-        box-shadow: 0 4px 20px 0 rgba(0,0,0,0.2);
+        box-shadow: $boxShadowHover;
       }
       .personal-img {
         display block
@@ -278,8 +280,8 @@ export default {
           margin-bottom .4rem
           padding: .4rem .8rem;
           transition: all .5s
-          border-radius 2px
-          box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+          border-radius $borderRadius
+          box-shadow $boxShadow
           &:not(:first-child) {
             border-top: none;
           }
@@ -301,7 +303,7 @@ export default {
               height 1.6rem
               text-align center
               line-height 1.6rem
-              border-radius 4px
+              border-radius $borderRadius
               background #eee
               font-size .6rem
               color $textColor

components/Navbar.vue

@@ -87,13 +87,15 @@ function css (el, property) {
 </script>
 
 <style lang="stylus">
+@require '../styles/recoConfig.styl'
+
 $navbar-vertical-padding = 0.7rem
 $navbar-horizontal-padding = 1.5rem
 
 .navbar
   padding $navbar-vertical-padding $navbar-horizontal-padding
   line-height $navbarHeight - 1.4rem
-  box-shadow 0 1px 6px 0 rgba(32,33,36,.28)
+  box-shadow $boxShadow
   a, span, img
     display inline-block
   .logo

components/NoteAbstract.vue

@@ -26,6 +26,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 
 .abstract-wrapper
   width 100%
@@ -34,13 +35,13 @@ export default {
     padding: 16px 20px;
     width 100%
     overflow: hidden;
-    border-radius: 2px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
+    border-radius: $borderRadius
+    box-shadow: $boxShadow;
     box-sizing: border-box;
     transition all .3s
     background-color $bgColor
     &:hover
-      box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
+      box-shadow: $boxShadowHover
     .title
       position: relative;
       font-size: 1.28rem;

components/Password.vue

@@ -94,6 +94,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
 .theme-container.no-sidebar
   .password-shadow
     padding-left 0
@@ -119,7 +120,7 @@ export default {
     font-size 30px
     box-sizing: border-box;
     padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
+    text-shadow $textShadow
   }
   .description {
     position: absolute;
@@ -132,13 +133,13 @@ export default {
     font-size 22px
     box-sizing: border-box;
     padding: 0 10px;
-    text-shadow 0 2px 10px rgba(0,0,0,0.2);
+    text-shadow $textShadow
   }
   .inputBox{
     max-width:700px;
     height: 100px;
     background: $accentColor;
-    border-radius: 2px;
+    border-radius: $borderRadius
     position: absolute;
     left 0
     right 0
@@ -191,7 +192,7 @@ export default {
     button{
       width:0px;
       height:98px;
-      border-radius: 2px;
+      border-radius: $borderRadius
       position: absolute;
       border 1px solid $accentColor
       right:1px;
@@ -229,7 +230,7 @@ export default {
       max-width:700px;
       height: 60px;
       background: $accentColor;
-      border-radius: 2px;
+      border-radius: $borderRadius
       position: absolute;
       left 0
       right 0
@@ -282,7 +283,7 @@ export default {
       button{
         width:0px;
         height:58px;
-        border-radius: 2px;
+        border-radius: $borderRadius
         position: absolute;
         border 1px solid $accentColor
         right:1px;
@@ -311,4 +312,4 @@ export default {
 @media (max-width: $MQMobile)
   .password-shadow
     padding-left 0
-</style>
+</style>

components/TagList.vue

@@ -45,6 +45,8 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
+@require '../styles/recoConfig.styl'
+
 .tags
   margin 30px 0
   span
@@ -53,14 +55,14 @@ export default {
     padding: 4px 8px;
     display: inline-block;
     cursor: pointer;
-    border-radius: 2px;
+    border-radius: $borderRadius
     background: #fff;
     color: #fff;
     font-size: 13px;
-    box-shadow 0 1px 4px 0 rgba(0,0,0,0.2)
+    box-shadow $boxShadow
     transition: all .5s
     &:hover
       transform scale(1.04)
     &.active
       transform scale(1.2)
-</style>
+</style>

components/Theme/ThemeOptions.vue

@@ -65,28 +65,21 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../../styles/recoConfig.styl'
 
 .color-theme-options {
 	display: flex;
 	flex-wrap wrap
 	li {
 		width: 20%;
 		text-align: center;
-
 		a {
 			width: 15px;
 			height: 15px;
-			border-radius: 2px;
-
+			border-radius: $borderRadius
 			&.default-theme {
 				background-color: $accentColor;
 			}
-
-			for key, value in $themePicker {
-				&.{key}-theme {
-					background-color: value;
-				}
-			}
 		}
 	}
 }

components/Theme/index.vue

@@ -41,6 +41,7 @@ export default {
 </script>
 
 <style lang="stylus">
+@require '../../styles/recoConfig.styl'
 
 .color-picker {
 	position: relative;
@@ -64,7 +65,7 @@ export default {
 		margin: 0;
 		padding: 1em;
 		border: 1px solid $borderColor;
-		border-radius: 4px;
+		border-radius: $borderRadius
 		transform: translateX(-50%);
 		z-index: 150;