jekyll-text-theme 1.5.0 → 2.0.0

data/_sass/common/classes/_shadow.scss

@@ -2,13 +2,21 @@
   @if $color == default {
     $color: #000;
   }
+  @if $level == 0 {
+    box-shadow: none;
+  }
   @if $level == 1 or $level == default {
-    box-shadow: 0 2px 10px rgba($color, 0.15);
+    box-shadow: 0 4px 6px rgba($color, .11), 0 1px 3px rgba($color, .08);
   }
   @if $level == 2 {
-    box-shadow: 0 2px 4px rgba($color, .12), 0 2px 8px rgba($color, .06), 0 2px 10px rgba($color, .2);
-  }
-  @if $level == 3 {
-    box-shadow: 0 4px 4px rgba($color, .16), 0 2px 8px rgba($color, .1), 0 4px 12px rgba($color, .25);
+    box-shadow: 0 7px 14px rgba($color, .1), 0 3px 6px rgba($color, .08);
   }
+}
+
+.box-shadow-1 {
+  @include box-shadow();
+}
+
+.box-shadow-2 {
+  @include box-shadow(2);
 }

data/_sass/common/classes/_spacing.scss

@@ -0,0 +1,52 @@
+@mixin make-spacing($type, $direction, $spacer) {
+
+  $_type: null;
+  $_dirs: null;
+
+  @if ($type == 'm') {
+    $_type: 'margin';
+  } @else if ($type == 'p') {
+    $_type: 'padding';
+  }
+
+  @if ($direction == 't') {
+    $_dirs: ('top');
+  }
+  @else if ($direction == 'b') {
+    $_dirs: ('bottom');
+  }
+  @else if ($direction == 'l') {
+    $_dirs: ('left');
+  }
+  @else if ($direction == 'r') {
+    $_dirs: ('right');
+  }
+  @else if ($direction == 'x') {
+    $_dirs: ('left', 'right');
+  }
+  @else if ($direction == 'y') {
+    $_dirs: ('top', 'bottom');
+  }
+  @else if ($direction == '') {
+    $_dirs: ('top', 'bottom', 'left', 'right');
+  }
+
+  @each $dir in $_dirs {
+    #{$_type}-#{$dir} : map-get($spacers, $spacer);
+  }
+}
+
+
+$_types: ('m', 'p');
+$_directions: ('t', 'b', 'l', 'r', 'x', 'y', '');
+$_spacers: (0, 1, 2, 3, 4, 5);
+
+@each $i in $_types {
+  @each $j in $_directions {
+    @each $k in $_spacers {
+      .#{$i}#{$j}-#{$k} {
+        @include make-spacing($i, $j, $k);
+      }
+    }
+  }
+}

data/_sass/common/components/_button.scss

@@ -1,72 +1,204 @@
-%button {
-  font-weight: map-get($base, font-weight-bold);
-  line-height: 1;
-  box-sizing: border-box;
-  display: block;
-  cursor: pointer;
-  @include link-normal() {
-    text-decoration: none;
+@mixin button-colors($clr, $bg-clr, $hover-clr: default, $hover-bg-clr: default, $active-clr: default, $active-bg-clr: default, $focus-clr: default, $focus-bg-clr: default, $theme: default) {
+  @if $theme == default {
+    $theme: light;
+  }
+  @if $hover-clr == default {
+    $hover-clr: $clr
+  }
+  @if $hover-bg-clr == default {
+    @if $theme == 'light' {
+      $hover-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $hover-bg-clr: lighten($bg-clr, 23%);
+    }
+  }
+
+  @if $active-clr == default {
+    $active-clr: $clr
+  }
+  @if $active-bg-clr == default {
+    @if $theme == 'light' {
+      $active-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $active-bg-clr: lighten($bg-clr, 23%);
+    }
+  }
+
+  @if $focus-clr == default {
+    $focus-clr: $clr
+  }
+  @if $focus-bg-clr == default {
+    @if $theme == 'light' {
+      $focus-bg-clr: darken($bg-clr, 13%);
+    }
+    @if $theme == 'dark' {
+      $focus-bg-clr: lighten($bg-clr, 23%);
+    }
   }
-  .not-touch &, & {
-    @include link-hover() {
-      text-decoration: none;
+  @include plain {
+    color: $clr;
+    background-color: $bg-clr;
+    svg path {
+      fill: $clr;
     }
   }
-  @include link-active() {
-    text-decoration: none;
+  @include hover {
+    color: $hover-clr;
+    background-color: $hover-bg-clr;
+    svg path {
+      fill: $hover-clr;
+    }
   }
-  @include link-focus() {
-    text-decoration: none;
+  @include active {
+    color: $active-clr;
+    background-color: $active-bg-clr;
+    svg path {
+      fill: $active-clr;
+    }
   }
-  @include link-colors($text-color-3, $main-color-3, $text-color-1, $main-color-1, $text-color-1, $main-color-1);
-  @include link-animation();
+  @include focus {
+    color: $focus-clr;
+    @include box-shadow(2, $focus-bg-clr);
+    background-color: $focus-bg-clr;
+    svg path {
+      fill: $focus-clr;
+    }
+  }
+}
+
+@mixin button() {
+  font-weight: map-get($button, font-weight);
+  line-height: map-get($base, line-height);
+  outline: none;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none !important;
+  @include transition(map-get($button, transition));
   svg {
     width: 1rem;
     height: 1rem;
     path {
-      @include link-animation();
+      @include transition(map-get($button, transition));
     }
   }
-  &.inactive {
+  &.disabled,
+  &:disabled {
     cursor: not-allowed;
-    @include link-normal() {
-      color: rgba($text-color-3, .2) !important;
-      background-color: $main-color-3 !important;
-      svg path {
-        fill: rgba($text-color-3, .2) !important;
-      }
-    }
-    @include link-emphasize() {
-      color: rgba($text-color-3, .2) !important;
-      background-color: $main-color-3 !important;
-      svg path {
-        fill: rgba($text-color-3, .2) !important;
-      }
+    color: rgba($text-color-3, .2) !important;
+    background-color: $main-color-3 !important;
+    svg path {
+      fill: rgba($text-color-3, .2) !important;
     }
   }
 }
 
-%floating-action {
-  @include box-shadow(2);
-  &:hover {
-    @include box-shadow(3);
-  }
+.button {
+  @include button();
+}
+
+.button--primary {
+  @include button-colors($text-color-1, $main-color-1);
+}
+
+.button--secondary {
+  @include button-colors($text-color-3, $main-color-3);
 }
 
-.round-button {
-  @extend %button;
-  @include round;
-  @include flexbox;
+.button--success {
+  @include button-colors($text-color-function, $green);
+}
+
+.button--info {
+  @include button-colors($text-color-function, $blue);
+}
+
+.button--warning {
+  @include button-colors($text-color-function, $yellow);
+}
+
+.button--error {
+  @include button-colors($text-color-function, $red);
+}
+
+.button--outline-primary {
+  color: $main-color-1;
+  border: 1px solid $main-color-1;
+  @include button-colors($main-color-1, transparent, $text-color-1, $main-color-1, $text-color-1, $main-color-1, $text-color-1, $main-color-1);
+}
+
+.button--outline-secondary {
+  color: $main-color-3;
+  border: 1px solid $main-color-3;
+  @include button-colors($main-color-3, transparent, $text-color-3, $main-color-3, $text-color-3, $main-color-3, $text-color-3, $main-color-3);
+}
+
+.button--outline-success {
+  color: $green;
+  border: 1px solid $green;
+  @include button-colors($green, transparent, $text-color-function, $green, $text-color-function, $green, $text-color-function, $green);
+}
+
+.button--outline-info {
+  color: $blue;
+  border: 1px solid $blue;
+  @include button-colors($blue, transparent, $text-color-function, $blue, $text-color-function, $blue, $text-color-function, $blue);
+}
+
+.button--outline-warning {
+  color: $yellow;
+  border: 1px solid $yellow;
+  @include button-colors($yellow, transparent, $text-color-function, $yellow, $text-color-function, $yellow, $text-color-function, $yellow);
+}
+
+.button--outline-error {
+  color: $red;
+  border: 1px solid $red;
+  @include button-colors($red, transparent, $text-color-function, $red, $text-color-function, $red, $text-color-function, $red);
+}
+
+.button--pill {
+  border-radius: 2rem;
+  @extend .button--md;
+}
+
+.button--rounded {
+  border-radius: map-get($base, border-radius);
+  @extend .button--md;
+}
+
+.button--circle {
+  @include flexbox();
   @include justify-content(center);
   @include align-items(center);
+  border-radius: 50%;
+  @extend .button--md;
 }
 
-.floating-action-round-button {
-  @extend .round-button;
-  @extend %floating-action;
+.button--md {
+  font-size: map-get($base, font-size);
+  padding: map-get($button, padding-y) map-get($button, padding-x);
+  &.button--circle {
+    width: map-get($button, circle-diameter);
+    height: map-get($button, circle-diameter);
+  }
 }
 
-.pill-button {
-  @extend %button;
-  @include round-rect(2rem, .4rem .6rem);
+.button--sm {
+  font-size: map-get($base, font-size-sm);
+  padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
+  &.button--circle {
+    width: map-get($button, circle-diameter-sm);
+    height: map-get($button, circle-diameter-sm);
+  }
 }
+
+.button--lg {
+  font-size: map-get($base, font-size-lg);
+  padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
+  &.button--circle {
+    width: map-get($button, circle-diameter-lg);
+    height: map-get($button, circle-diameter-lg);
+  }
+}

data/_sass/common/components/_card.scss

@@ -0,0 +1,18 @@
+@mixin card($has-shadow: default) {
+  @if $has-shadow == default {
+    $has-shadow: true
+  }
+  border-radius: map-get($base, border-radius);
+  padding: .5rem 1rem;
+  @if $has-shadow {
+    @include box-shadow();
+  }
+}
+
+.card {
+  @include card();
+}
+
+.card--no-shadow {
+  @include box-shadow(0);
+}

data/_sass/common/components/_menu.scss

@@ -0,0 +1,43 @@
+@mixin menu($horizontal-spacer: default, $horizontal-item-vertical-spacer: default, $wrap: default) {
+  @if $horizontal-spacer == default {
+    $horizontal-spacer: map-get($menu, horizontal-spacer);
+  }
+  @if $horizontal-item-vertical-spacer == default {
+    $horizontal-item-vertical-spacer: map-get($menu, horizontal-item-vertical-spacer);
+  }
+  @if $wrap == default {
+    $wrap: wrap;
+  }
+  @include flexbox();
+  @include flex-wrap($wrap);
+  @include align-items(center);
+  margin-top: 0;
+  margin-bottom: 0;
+  & > li {
+    @if $horizontal-item-vertical-spacer {
+      margin-top: map-get($spacers, $horizontal-item-vertical-spacer);
+      margin-bottom: map-get($spacers, $horizontal-item-vertical-spacer);
+    }
+    list-style-type: none;
+    margin-right: map-get($spacers, $horizontal-spacer);
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.menu {
+  @include menu();
+}
+
+.menu--center {
+  @include justify-content(center);
+}
+
+.menu--nowrap {
+  @include flex-wrap(nowrap);
+}
+
+.menu--grow {
+  @include flex-grow(1);
+}

data/_sass/common/components/_toc.scss

@@ -0,0 +1,125 @@
+ul.toc {
+  display: block;
+  margin: 0;
+  list-style-type: none;
+  & > li {
+    margin: .1rem 0;
+    &.active {
+      a {
+        background-color: $main-color-3;
+        @include link-colors($main-color-1);
+      }
+    }
+  }
+
+  a {
+    display: inline-block;
+    padding: .2rem .8rem .2rem .8rem;
+    border-radius: map-get($base, border-radius);
+    @include link-colors($text-color);
+    @include plain() {
+      text-decoration: none;
+    }
+    @include hover() {
+      color: $text-color-3;
+      background-color: $main-color-3;
+      text-decoration: none;
+    }
+    @include active() {
+      text-decoration: none;
+    }
+    @include focus() {
+      text-decoration: none;
+    }
+  }
+
+  .toc-h1 {
+    @include split-line(bottom);
+    padding: .8rem 0 .3rem 0;
+    margin-bottom: .6rem;
+    &, a {
+      color: $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);
+    }
+  }
+  .toc-h5,
+  .toc-h6 {
+    &, a {
+      color: $text-color-l;
+    }
+  }
+  .toc-h3 {
+    margin-left: 1rem;
+  }
+  .toc-h4 {
+    margin-left: 2rem;
+  }
+  .toc-h5, .toc-h6 {
+    margin-left: 3rem;
+  }
+
+  .toc-h1 {
+    &, a {
+      font-size: map-get($base, font-size);
+      line-height: map-get($base, line-height-lg);
+    }
+  }
+  .toc-h2 {
+    &, a {
+      font-size: map-get($base, font-size-sm);
+      line-height: map-get($base, line-height);
+    }
+  }
+  .toc-h3,
+  .toc-h4,
+  .toc-h5,
+  .toc-h6 {
+    &, a {
+      font-size: map-get($base, font-size-xs);
+      line-height: map-get($base, line-height-xs);
+    }
+  }
+}
+
+ul.toc--navigator {
+  & > li {
+    &.active {
+      a {
+        background-color: transparent;
+        @include link-colors($main-color-1);
+        @include split-line(left, 4px, $main-color-1);
+        margin-left: -4px;
+      }
+    }
+  }
+
+  .toc-h2,
+  .toc-h3,
+  .toc-h4 {
+    &, a {
+      @include link-colors($text-color-l, $main-color-1, $main-color-1);
+    }
+  }
+
+  a {
+    padding: 0 0 0 .5rem;
+    margin: .2rem 0;
+    border-radius: 0;
+    @include hover() {
+      background-color: transparent;
+    }
+  }
+}