diff --git a/demo/all.html b/demo/all.html index 37aa88f33..951f280df 100644 --- a/demo/all.html +++ b/demo/all.html @@ -1,7 +1,7 @@ + + + + + + Icons - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Tabler + +
+
+ + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
+
+
+
+
+ + +
+
Paweł Kuna
+
UI Designer
+
+ +
+ Set status + Profile & account + Feedback +
+ Settings + Logout +
+
+
+
+
+
+ +
+
+
+ +
+
+
+

+ Documentation +

+
+
+
+
+
+ +
+
+
+
+
+
+
+

Icons

+
+
+

Base icon

+
+
+ + + + +
+
+
+
+ 
<!-- SVG icon code -->
+<!-- SVG icon code -->
+<!-- SVG icon code -->
+<!-- SVG icon code -->
+
+
+

Filled icons

+
+
+ + + + +
+
+
+
+ 
<!-- SVG icon code with class="icon-filled" -->
+<!-- SVG icon code with class="icon-filled" -->
+<!-- SVG icon code with class="icon-filled" -->
+<!-- SVG icon code with class="icon-filled" -->
+
+
+

Icon colors

+
+
+ + + + + + + + + + + + +
+
+
+
+ 
<span class="text-red">
+  <!-- SVG icon code with class="icon-filled" -->
+</span>
+<span class="text-yellow">
+  <!-- SVG icon code with class="icon-filled" -->
+</span>
+<span class="text-blue">
+  <!-- SVG icon code -->
+</span>
+<span class="text-green">
+  <!-- SVG icon code -->
+</span>
+
+
+
+
+
+
+
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/demo/docs/index.html b/demo/docs/index.html index a7172b626..0bfcef1a3 100644 --- a/demo/docs/index.html +++ b/demo/docs/index.html @@ -1,7 +1,7 @@ + + + + + + Switch icon - Tabler - Premium and Open Source dashboard template with responsive and high quality UI. + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + Tabler + +
+
+ + + + +
+
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad amet consectetur exercitationem fugiat in ipsa ipsum, natus odio quidem quod repudiandae sapiente. Amet debitis et magni maxime necessitatibus ullam. +
+
+
+
+
+ + +
+
Paweł Kuna
+
UI Designer
+
+ +
+ Set status + Profile & account + Feedback +
+ Settings + Logout +
+
+
+
+
+
+ +
+
+
+ +
+
+
+

+ Documentation +

+
+
+
+
+
+ +
+
+
+
+
+
+
+

Switch icon

+
+

The Switch Icon component is used to create a transition between two icons. You can use any icon, both line and filled version.

+
+

Default markup

+

To replace the icons, all should add active class to the switch-icon component.

+
+
+
+ +
+
+
+
+
+ 
<button class="switch-icon" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-blue">
+    <!-- SVG icon code -->
+  </span>
+</button>
+
+
+

Switch animations

+

You can also add a fancy animation to add variety to your button. See demo below:

+
+
+
+ + + + + + + + +
+
+
+
+
+ 
<button class="switch-icon" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-blue">
+    <!-- SVG icon code with class="icon-filled" -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-fade" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-red">
+    <!-- SVG icon code with class="icon-filled" -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-scale" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-yellow">
+    <!-- SVG icon code with class="icon-filled" -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-flip" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-facebook">
+    <!-- SVG icon code -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-slide-up" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-twitter">
+    <!-- SVG icon code -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-slide-left" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-red">
+    <!-- SVG icon code -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-slide-down" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-muted">
+    <!-- SVG icon code -->
+  </span>
+</button>
+<button class="switch-icon switch-icon-slide-right" data-toggle="switch-icon">
+  <span class="switch-icon-a text-muted">
+    <!-- SVG icon code -->
+  </span>
+  <span class="switch-icon-b text-muted">
+    <!-- SVG icon code -->
+  </span>
+</button>
+
+
+
+
+
+
+
+
+ +
+
+ + + + + + + \ No newline at end of file diff --git a/demo/docs/tables.html b/demo/docs/tables.html index a64eedcf0..40034a196 100644 --- a/demo/docs/tables.html +++ b/demo/docs/tables.html @@ -1,7 +1,7 @@