feat: update skins

dayeol · Dec 3, 2018 · 567e7e8 · 567e7e8
1 parent 2ae9bcc
commit 567e7e8
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 17 deletions.
diff --git a/.stylelintrc b/.stylelintrc
@@ -251,7 +251,6 @@
     "no-missing-end-of-source-newline": null,
     "property-no-vendor-prefix": true,
     "rule-empty-line-before": null,
-    "scss/dollar-variable-default": [true, { "ignore": "local" }],
     "selector-attribute-quotes": "always",
     "selector-list-comma-newline-after": "always-multi-line",
     "selector-list-comma-newline-before": "never-multi-line",

diff --git a/_includes/search.html b/_includes/search.html
@@ -14,7 +14,7 @@
           <a><i class="fas fa-times"></i></a>
         </div>
       </div>
-      <button class="button button--secondary button--pill search__cancel js-search-toggle">
+      <button class="button button--theme-dark button--pill search__cancel js-search-toggle">
         {{ _locale_cancel }}</button>
     </div>
     <div class="search-result js-search-result"></div>

diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
@@ -2,7 +2,6 @@
   display: inline-block;
   font-weight: map-get($button, font-weight);
   line-height: 1 !important;
-
   text-decoration: none !important;
   cursor: pointer;
   outline: none;
@@ -48,6 +47,14 @@
   @include clickable($text-color-function, $red);
 }
 
+.button--theme-light {
+  @include clickable($text-color-theme-dark, $main-color-theme-light);
+}
+
+.button--theme-dark {
+  @include clickable($text-color-theme-light, $main-color-theme-dark);
+}
+
 .button--outline-primary {
   color: $main-color-1;
   border: 1px solid $main-color-1;
@@ -84,6 +91,18 @@
   @include clickable($red, transparent, $text-color-function, $red);
 }
 
+.button--outline-theme-light {
+  color: $main-color-theme-light;
+  border: 1px solid $main-color-theme-light;
+  @include clickable($text-color-theme-dark, $main-color-theme-light);
+}
+
+.button--outline-theme-dark {
+  color: $main-color-theme-dark;
+  border: 1px solid $main-color-theme-dark;
+  @include clickable($text-color-theme-light, $main-color-theme-dark);
+}
+
 .button--pill {
   border-radius: map-get($button, pill-radius);
   @extend .button--md;

diff --git a/_sass/common/components/_swiper.scss b/_sass/common/components/_swiper.scss
@@ -28,15 +28,15 @@
   top: 50%;
   @extend .button, .button--circle;
   @include transform(translate(0, -50%));
-  @include clickable($text-color-d, rgba($main-color-3, .5));
+  @include clickable($text-color-d, rgba($main-color-3, .4));
 }
 
 .swiper--light .swiper__button {
-  @include clickable($text-color-theme-light, rgba(#fff, .15));
+  @include clickable($text-color-theme-light, rgba($main-color-theme-dark, .4));
 }
 
 .swiper--dark .swiper__button {
-  @include clickable($text-color-theme-dark, rgba(#000, .15));
+  @include clickable($text-color-theme-dark, rgba($main-color-theme-light, .4));
 }
 
 .swiper__button--prev {

diff --git a/_sass/components/_search.scss b/_sass/components/_search.scss
@@ -22,15 +22,23 @@
     border: 2px solid $border-color;
     border-radius: map-get($button, pill-radius);
     -webkit-appearance: none; /* fix iOS don't display box-shadow properly */
+    @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
+    @include focus {
+      box-shadow: 0 0 0 2px rgba($border-color, .4);
+    }
     .search--light & {
       color: $text-color-theme-light;
+      border-color: $text-color-theme-light;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-light, .4);
+      }
     }
     .search--dark & {
       color: $text-color-theme-dark;
-    }
-    @include transition(box-shadow map-get($animation, duration) map-get($animation, timing-function));
-    @include focus {
-      box-shadow: 0 0 0 2px rgba($border-color, .4);
+      border-color: $text-color-theme-dark;
+      @include focus {
+        box-shadow: 0 0 0 2px rgba($text-color-theme-dark, .4);
+      }
     }
   }
   & > .search-box__icon-search {
@@ -100,17 +108,25 @@
     @include transition(none);
     @include clickable($text-color, transparent, $text-color-3, $main-color-3);
     .search--light & {
-      @include clickable($text-color-theme-light, transparent, $text-color-3, $main-color-3);
+      @include clickable($text-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
     }
     .search--dark & {
-      @include clickable($text-color-theme-dark, transparent, $text-color-3, $main-color-3);
+      @include clickable($text-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
     }
   }
   &.active {
     a {
       @include plain() {
         color: $text-color-3;
         background-color: $main-color-3;
+        .search--light & {
+          color: $text-color-theme-dark;
+          background-color: $main-color-theme-light;
+        }
+        .search--dark & {
+          color: $text-color-theme-light;
+          background-color: $main-color-theme-dark;
+        }
       }
       @include active() {
         @include transition(map-get($link, transition));

diff --git a/_sass/skins/_chocolate.scss b/_sass/skins/_chocolate.scss
@@ -14,6 +14,9 @@ $text-color-2:     rgba(#fff, .85);
 $main-color-3:     #b49b92;
 $text-color-3:     rgba(#fff, .85);
 
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
 // page background
 $background-color: #d2c2bc;
 

diff --git a/_sass/skins/_dark.scss b/_sass/skins/_dark.scss
@@ -14,6 +14,9 @@ $text-color-2:     rgba(#fff, .8);
 $main-color-3:     #202020;
 $text-color-3:     rgba(#fff, .8);
 
+$main-color-theme-light: rgba(#000, .8);
+$main-color-theme-dark:  rgba(#fff, .8);
+
 // page background
 $background-color: #121212;
 

diff --git a/_sass/skins/_default.scss b/_sass/skins/_default.scss
@@ -14,6 +14,9 @@ $text-color-2:     #fff;
 $main-color-3:     #f2f2f2;
 $text-color-3:     #333;
 
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
 // page background
 $background-color: #fff;
 

diff --git a/_sass/skins/_forest.scss b/_sass/skins/_forest.scss
@@ -14,6 +14,9 @@ $text-color-2:     #fff;
 $main-color-3:     #7cc7bb;
 $text-color-3:     #fff;
 
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
 // page background
 $background-color: #f8fcfb;
 

diff --git a/_sass/skins/_ocean.scss b/_sass/skins/_ocean.scss
@@ -5,17 +5,20 @@
 ///
 
 // main colors
-$main-color-1:     #125c9f;
+$main-color-1:     #0366d6;
 $text-color-1:     #fff;
 
 $main-color-2:     #a5917f;
 $text-color-2:     #fff;
 
-$main-color-3:     #e1f5ff;
-$text-color-3:     #00537f;
+$main-color-3:     #f1f8ff;
+$text-color-3:     #0366d6;
+
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
 
 // page background
-$background-color: #f5fcff;
+$background-color: #fff;
 
 // text colors
 $text-color-theme-light-d: rgba(#000, .95);
@@ -40,7 +43,7 @@ $footer-text-color: $text-color-3;
 $footer-background: $main-color-3;
 
 // border and shadow colors
-$border-color:     #125c9f;
+$border-color:     mix(#000, $background-color, 20%);
 $border-color-l:   mix(#000, $background-color, 10%);
 $decorate-color:   rgba(#000, .1);
 $mask-color:       rgba(#000, .9);

diff --git a/_sass/skins/_orange.scss b/_sass/skins/_orange.scss
@@ -14,6 +14,9 @@ $text-color-2:     #fff;
 $main-color-3:     #ff8a64;
 $text-color-3:     #fff;
 
+$main-color-theme-light: rgba(#000, .9);
+$main-color-theme-dark:  rgba(#fff, .9);
+
 // page background
 $background-color: #fffdfa;