jekyll-text-theme 2.2.3 → 2.2.4

data/_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;

data/_sass/common/components/_card.scss

@@ -86,6 +86,7 @@ a.card__header, .card__header > a {
       }
     }
   }
+  @include transition(map-get($link, transition));
 }
 
 .card--flat {

data/_sass/common/components/_gallery.scss

@@ -0,0 +1,21 @@
+.gallery {
+  height: 100%;
+  @include flexbox();
+  @include flex-direction(column);
+}
+
+.gallery__swiper {
+  @include flex(1);
+}
+
+.gallery-item{
+  display: table;
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-item__content {
+  display: table-cell;
+  text-align: center;
+  vertical-align: middle;
+}

data/_sass/common/components/_item.scss

@@ -35,7 +35,7 @@ a.item__header, .item__header > a {
 
 .item__description {
   &, .article__content {
-    font-size: map-get($base, font-size-xs);
+    font-size: map-get($base, font-size-sm);
     line-height: map-get($base, line-height);
     @include block-elements() {
       margin-top: map-get($spacers, 2);

data/_sass/common/components/_modal.scss

@@ -0,0 +1,39 @@
+@mixin modal($z-index: default, $color: default, $background-color: default) {
+  @if $z-index == default {
+    $z-index: map-get($z-indexes, modal);
+  }
+  @if $color == default {
+    $color: $text-color-theme-dark;
+  }
+  @if $background-color == default {
+    $background-color: $mask-color;
+  }
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $z-index;
+  width: 100%;
+  height: 100%;
+  color: $color;
+  touch-action: none;
+  background-color: $background-color;
+  opacity: 0;
+  @include transform(translate(100%, 0));
+  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function),
+  transform 0s map-get($animation, duration) map-get($animation, timing-function)});
+}
+@mixin modal--show() {
+  opacity: 1;
+  @include transform(translate(0, 0));
+  @include transition(#{opacity map-get($animation, duration) map-get($animation, timing-function)});
+}
+
+.modal {
+  @include modal();
+}
+.modal--show {
+  @include modal--show();
+}
+.modal--overflow {
+  @include overflow(auto);
+}

data/_sass/common/components/_swiper.scss

@@ -1,6 +1,6 @@
 .swiper {
   position: relative;
-  overflow: hidden;
+  @include overflow(hidden);
 }
 
 .swiper__wrapper, .swiper__slide {
@@ -18,6 +18,9 @@
 
 .swiper__slide {
   @include flex-shrink(0);
+  & > img {
+    max-width: 100%;
+  }
 }
 
 .swiper__button {
@@ -25,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 {

data/_sass/common/components/_toc.scss

@@ -6,60 +6,42 @@ ul.toc {
     margin: map-get($spacers, 1) 0;
     &.active {
       a {
-        color: $text-color-3;
-        background-color: $main-color-3;
-        box-shadow: 0 0 0 2px rgba($main-color-3, .4);
+        color: $main-color-1;
       }
     }
   }
 
   a {
     display: inline-block;
-    padding: map-get($spacers, 1) map-get($spacers, 2) map-get($spacers, 1) map-get($spacers, 2);
+    margin: map-get($spacers, 1) / 4 0;
     text-decoration: none !important;
-    border-radius: map-get($base, border-radius);
-    @include clickable($text-color, null, $text-color-3, $main-color-3);
+    @include link-colors($text-color, $main-color-1);
   }
-
   .toc-h1 {
-    @include split-line(bottom);
-    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
-    margin-bottom: map-get($spacers, 2);
     a {
       @include link-colors($text-color-d);
     }
-  }
-  .toc-h1,
-  .toc-h2 {
-    &, a {
-      font-weight: map-get($base, font-weight-bold);
-    }
-  }
-  .toc-h3,
-  .toc-h4,
-  .toc-h5,
-  .toc-h6 {
-    &, a {
-      font-weight: map-get($base, font-weight);
+    &.active {
+      a {
+        color: $main-color-1;
+      }
     }
   }
-  .toc-h5,
-  .toc-h6 {
+  .toc-h5, .toc-h6 {
     a {
       @include link-colors($text-color-l);
     }
-  }
-  .toc-h3 {
-    margin-left: map-get($spacers, 3);
-  }
-  .toc-h4 {
-    margin-left: map-get($spacers, 3) * 2;
-  }
-  .toc-h5, .toc-h6 {
-    margin-left: map-get($spacers, 3) * 3;
+    &.active {
+      a {
+        color: $main-color-1;
+      }
+    }
   }
 
   .toc-h1 {
+    @include split-line(bottom);
+    padding: map-get($spacers, 2) 0 map-get($spacers, 1) 0;
+    margin-bottom: map-get($spacers, 2);
     &, a {
       font-size: map-get($base, font-size);
       line-height: map-get($base, line-height);
@@ -71,34 +53,58 @@ ul.toc {
       line-height: map-get($base, line-height-sm);
     }
   }
+  .toc-h1,
+  .toc-h2 {
+    &, a {
+      font-weight: map-get($base, font-weight-bold);
+    }
+  }
   .toc-h3,
   .toc-h4,
   .toc-h5,
   .toc-h6 {
     &, a {
       font-size: map-get($base, font-size-xs);
+      font-weight: map-get($base, font-weight);
       line-height: map-get($base, line-height-xs);
     }
   }
+  .toc-h3 {
+    margin-left: map-get($spacers, 3);
+  }
+  .toc-h4 {
+    margin-left: map-get($spacers, 3) * 2;
+  }
+  .toc-h5, .toc-h6 {
+    margin-left: map-get($spacers, 3) * 3;
+  }
+}
+
+ul.toc--ellipsis {
+  & > li {
+    @include overflow(hidden);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
 
 ul.toc--navigator {
   & > li {
-    @include active() {
-      a {
-        background-color: transparent;
-      }
-    }
     &.active {
       a {
         margin-left: -4px;
-        background-color: transparent;
-        box-shadow: none;
         @include link-colors($main-color-1);
         @include split-line(left, 4px, $main-color-1);
       }
     }
   }
+  a {
+    padding-left: map-get($spacers, 2);
+    margin: map-get($spacers, 1) 0;
+    @include hover() {
+      background-color: transparent;
+    }
+  }
 
   .toc-h2,
   .toc-h3,
@@ -107,13 +113,4 @@ ul.toc--navigator {
       @include link-colors($text-color-l);
     }
   }
-
-  a {
-    padding: 0 0 0 map-get($spacers, 2);
-    margin: map-get($spacers, 1) 0;
-    border-radius: 0;
-    @include hover() {
-      background-color: transparent;
-    }
-  }
 }

data/_sass/components/_article-content.scss

@@ -128,7 +128,7 @@
       & > code {
         & > .rouge-table {
           width: auto;
-          margin: 0 0 - map-get($spacers, 3) - map-get($spacers, 3);
+          margin: 0 0 #{- map-get($spacers, 3)} #{- map-get($spacers, 3)};
           tbody, tr, td {
             padding-top: 0;
             padding-bottom: 0;

data/_sass/components/_header.scss

@@ -68,7 +68,7 @@
 }
 
 .navigation {
-  @include overflow(auto);
+  @include overflow(auto, "x");
   & > ul {
     height: map-get($layout, header-height);
     padding-bottom: 0;

data/_sass/components/_lightbox.scss

@@ -0,0 +1,7 @@
+.popup-image {
+  cursor: pointer;
+  @include hover() {
+    @include box-shadow(2);
+  }
+  @include transition(map-get($link, transition));
+}

data/_sass/components/_search.scss

@@ -1,7 +1,28 @@
+.search {
+  @include overflow(auto);
+}
+
+.search__header {
+  margin-top: map-get($spacers, 4);
+  font-size: map-get($base, font-size-h1);
+  font-weight: map-get($base, font-weight-bold);
+  color: $text-color-d;
+  .search--light & {
+    color: $text-color-theme-light-d;
+  }
+  .search--dark & {
+    color: $text-color-theme-dark-d;
+  }
+  @include media-breakpoint-down(md) {
+    display: none;
+  }
+}
+
 .search-bar {
   @include flexbox();
   margin: map-get($spacers, 3) 0 map-get($spacers, 4) 0;
 }
+
 .search-box {
   position: relative;
   width: 100%;
@@ -22,15 +43,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 {
@@ -75,11 +104,19 @@
     left: 0;
   }
 }
+
+.search__cancel {
+  margin-left: map-get($spacers, 2);
+  font-weight: map-get($base, font-weight-bold);
+  white-space: nowrap;
+}
+
 .search-result {
   margin: map-get($spacers, 4) 0;
   font-size: map-get($base, font-size-sm);
   line-height: map-get($base, line-height-sm);
 }
+
 .search-result__header {
   margin: map-get($spacers, 3) 0 map-get($spacers, 2) 0;
   font-size: map-get($base, font-size-lg);
@@ -93,6 +130,7 @@
     color: $text-color-theme-dark-l;
   }
 }
+
 .search-result__item {
   list-style-type: none;
   a {
@@ -100,10 +138,10 @@
     @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 {
@@ -111,30 +149,18 @@
       @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));
       }
     }
   }
-}
-.search__header {
-  margin-top: map-get($spacers, 4);
-  font-size: map-get($base, font-size-h1);
-  font-weight: map-get($base, font-weight-bold);
-  color: $text-color-d;
-  .search--light & {
-    color: $text-color-theme-light-d;
-  }
-  .search--dark & {
-    color: $text-color-theme-dark-d;
-  }
-  @include media-breakpoint-down(md) {
-    display: none;
-  }
-}
-.search__cancel {
-  margin-left: map-get($spacers, 2);
-  font-weight: map-get($base, font-weight-bold);
-  white-space: nowrap;
 }