switch icon component

src/js/tabler.js

@@ -34,4 +34,14 @@ import './dropdown';
 		return new bootstrap.Dropdown(dropdownTriggerEl);
 	});
 
+
+	let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="switch-icon"]'));
+	switchesTriggerList.map(function (switchTriggerEl) {
+		switchTriggerEl.addEventListener('click', (e) => {
+			e.stopPropagation();
+
+			switchTriggerEl.classList.toggle('active');
+		});
+	});
+
 })();

src/pages/_data/docs.yml

@@ -11,6 +11,9 @@ base:
     typography:
       title: Typography
       url: docs/typography.html
+    icons:
+      title: Icons
+      url: docs/icons.html
 
 components:
   title: Components
@@ -76,6 +79,9 @@ components:
     steps:
       title: Steps
       url: docs/steps.html
+    switch-icon:
+      title: Switch icon
+      url: docs/switch-icon.html
     tables:
       title: Tables
       url: docs/tables.html

src/pages/_docs/icons.md

@@ -0,0 +1,44 @@
+---
+title: Icons
+menu: docs.base.icons
+---
+
+## Base icon
+
+{% capture code %}
+  {% include ui/icon.html icon="heart" %}
+  {% include ui/icon.html icon="ghost" %}
+  {% include ui/icon.html icon="star" %}
+  {% include ui/icon.html icon="bike" %}
+{% endcapture %}
+{% include example.html code=code %}
+
+## Filled icons 
+
+{% capture code %}
+  {% include ui/icon.html icon="heart" class="icon-filled" %}
+  {% include ui/icon.html icon="circle" class="icon-filled" %}
+  {% include ui/icon.html icon="star" class="icon-filled" %}
+  {% include ui/icon.html icon="square" class="icon-filled" %}
+{% endcapture %}
+{% include example.html code=code %}
+
+## Icon colors
+
+{% capture code %}
+  <span class="text-red">
+    {% include ui/icon.html icon="heart" class="icon-filled" %}
+  </span>
+  <span class="text-yellow">
+    {% include ui/icon.html icon="star" class="icon-filled" %}
+  </span>
+  <span class="text-blue">
+    {% include ui/icon.html icon="circle" %}
+  </span>
+  <span class="text-green">
+    {% include ui/icon.html icon="square" %}
+  </span>
+{% endcapture %}
+{% include example.html code=code %}
+
+

src/pages/_docs/switch-icon.md

@@ -0,0 +1,25 @@
+---
+title: Switch icon
+menu: docs.components.switch-icon
+---
+
+## Default markup
+
+{% capture code %}
+{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="blue"  %}
+{% endcapture %}
+{% include example.html code=code wrapper="d-flex space-x-2" %}
+
+## Switch animations
+
+{% capture code %}
+{% include ui/switch-icon.html icon="circle" icon-b-class="icon-filled" icon-b-color="blue"  %}
+{% include ui/switch-icon.html variant="fade" icon-b-class="icon-filled"  %}
+{% include ui/switch-icon.html variant="scale" icon="star" icon-b-class="icon-filled" icon-b-color="yellow" %}
+{% include ui/switch-icon.html variant="flip" icon="thumb-up" icon-b-color="facebook" %}
+{% include ui/switch-icon.html variant="slide-up" icon="brand-twitter" icon-b-color="twitter" %}
+{% include ui/switch-icon.html variant="slide-left" icon="check" icon-b="x" icon-b-color="red" %}
+{% include ui/switch-icon.html variant="slide-down" icon="arrow-down" icon-b="arrow-up" icon-a-color="muted" icon-b-color="muted" %}
+{% include ui/switch-icon.html variant="slide-right" icon="car" icon-b="scooter" icon-b-color="muted" %}
+{% endcapture %}
+{% include example.html code=code wrapper="d-flex space-x-2" %}

src/pages/_includes/example.html

@@ -23,7 +23,12 @@
 {% capture new_line %}
 {% endcapture %}
 {% assign code = code | replace_regex: "\n\n+", new_line %}
-{% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
+
+{% unless include.show-svg %}
+	{% assign code = code | replace_regex: '<svg[^>]*class="icon ([^"]+)"[^>]*>.*?<\/svg>', '<!-- SVG icon code with class="\1" -->' %}
+	{% assign code = code | replace_regex: '<svg[^>]*>.*?<\/svg>', '<!-- SVG icon code -->' %}
+{% endunless %}
+
 {% assign code = code | replace_regex: 'url\(([^\)]+)\)', 'url(...)' %}
 {% assign code = code | replace_regex: 'src="([^"]+)"', 'src="..."' %}
 {% assign code = code | replace_regex: 'href="([^#][^"]+)"', 'href="#"' %}

src/pages/_includes/ui/switch-icon.html

@@ -0,0 +1,12 @@
+{% assign icon = include.icon | default: 'heart' %}
+{% assign icon-b = include.icon-b | default: icon | default: 'heart' %}
+{% assign icon-a-color = include.icon-a-color | default: 'muted' %}
+{% assign icon-b-color = include.icon-b-color | default: 'red' %}
+<button class="switch-icon{% if include.variant %} switch-icon-{{ include.variant }}{% endif %}" data-toggle="switch-icon">
+	<span class="switch-icon-a text-{{ icon-a-color }}">
+		{% include ui/icon.html icon=icon %}
+	</span>
+	<span class="switch-icon-b text-{{ icon-b-color }}">
+		{% include ui/icon.html icon=icon-b class=include.icon-b-class %}
+	</span>
+</button>

src/scss/_tabler-core.scss

@@ -39,13 +39,14 @@
 @import "ui/popovers";
 @import "ui/progress";
 @import "ui/ribbons";
+@import "ui/markdown";
 @import "ui/skeleton";
 @import "ui/steps";
+@import "ui/switch-icon";
 @import "ui/tables";
 @import "ui/toasts";
 @import "ui/toolbar";
 @import "ui/type";
-@import "ui/markdown";
 @import "ui/charts";
 
 @import "utils/background";

src/scss/_variables.scss

@@ -24,6 +24,7 @@ $icon-fonts: () !default;
 
 //Icons
 $icon-stroke-width: 1.5 !default;
+$icon-size: 1.25rem !default;
 
 //Fonts
 $font-size-base: .875rem !default;

src/scss/ui/_buttons.scss

@@ -23,8 +23,8 @@
   }
 
   svg {
-    width: 1.25rem;
-    height: 1.25rem;
+    width: $icon-size;
+    height: $icon-size;
     margin: 0 .25rem 0;
     margin-inline-start: -.5rem;
     vertical-align: bottom;

src/scss/ui/_dropdowns.scss

@@ -23,8 +23,8 @@
 }
 
 .dropdown-item-icon {
-  width: 1.25rem !important;
-  font-size: 1.25rem !important;
+  width: $icon-size !important;
+  height: $icon-size !important;
   margin-right: .5rem;
   color: $text-muted;
   opacity: $text-muted-opacity;

src/scss/ui/_nav.scss

@@ -90,8 +90,8 @@
 }
 
 .nav-link-icon {
-  width: 1.25rem;
-  height: 1.25rem;
+  width: $icon-size;
+  height: $icon-size;
   margin-inline-end: .5rem;
   opacity: $text-muted-opacity;
 

src/scss/ui/_switch-icon.scss

@@ -0,0 +1,210 @@
+.switch-icon {
+  display: inline-block;
+  line-height: 1;
+  border: 0;
+  padding: 0;
+  background: transparent;
+  width: $icon-size;
+  height: $icon-size;
+  position: relative;
+  cursor: pointer;
+
+  &.disabled {
+    pointer-events: none;
+    opacity: $btn-disabled-opacity;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .switch-icon-a,
+  .switch-icon-b {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .switch-icon-a {
+    opacity: 1;
+  }
+
+  .switch-icon-b {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 0;
+  }
+
+  &.active {
+    .switch-icon-a {
+      opacity: 0;
+    }
+
+    .switch-icon-b {
+      opacity: 1;
+    }
+  }
+}
+
+// Fade variant
+.switch-icon-fade {
+  .switch-icon-a,
+  .switch-icon-b {
+    transition: opacity .5s;
+  }
+}
+
+// Scale variant
+.switch-icon-scale {
+  .switch-icon-a,
+  .switch-icon-b {
+    transition: opacity .5s, transform .0s .5s;
+  }
+
+  .switch-icon-b {
+    transform: scale(1.5);
+  }
+
+  &.active {
+    .switch-icon-a,
+    .switch-icon-b {
+      transition: opacity .0s, transform .5s;
+    }
+
+    .switch-icon-b {
+      transform: scale(1);
+    }
+  }
+}
+
+// Flip variant
+.switch-icon-flip {
+  perspective: 10em;
+
+  .switch-icon-a,
+  .switch-icon-b {
+    backface-visibility: hidden;
+    transform-style: preserve-3d;
+    transition: opacity 0s .2s, transform .4s ease-in-out;
+  }
+
+  .switch-icon-a {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+
+  .switch-icon-b {
+    opacity: 1;
+    transform: rotateY(-180deg);
+  }
+
+  &.active {
+    .switch-icon-a {
+      opacity: 1;
+      transform: rotateY(180deg);
+    }
+
+    .switch-icon-b {
+      opacity: 1;
+      transform: rotateY(0deg);
+    }
+  }
+}
+
+// Slide variant
+.switch-icon-slide-up,
+.switch-icon-slide-left,
+.switch-icon-slide-right,
+.switch-icon-slide-down {
+  overflow: hidden;
+
+  .switch-icon-a,
+  .switch-icon-b {
+    transition: opacity .3s, transform .3s;
+  }
+
+  .switch-icon-a {
+    transform: translateY(0);
+  }
+
+  .switch-icon-b {
+    transform: translateY(100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateY(-100%);
+    }
+
+    .switch-icon-b {
+      transform: translateY(0);
+    }
+  }
+}
+
+.switch-icon-slide-left {
+  .switch-icon-a {
+    transform: translateX(0);
+  }
+
+  .switch-icon-b {
+    transform: translateX(100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateX(-100%);
+    }
+
+    .switch-icon-b {
+      transform: translateX(0);
+    }
+  }
+}
+
+.switch-icon-slide-right {
+  .switch-icon-a {
+    transform: translateX(0);
+  }
+
+  .switch-icon-b {
+    transform: translateX(-100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateX(100%);
+    }
+
+    .switch-icon-b {
+      transform: translateX(0);
+    }
+  }
+}
+
+.switch-icon-slide-down {
+  .switch-icon-a {
+    transform: translateY(0);
+  }
+
+  .switch-icon-b {
+    transform: translateY(-100%);
+  }
+
+  &.active {
+    .switch-icon-a {
+      transform: translateY(100%);
+    }
+
+    .switch-icon-b {
+      transform: translateY(0);
+    }
+  }
+}