Merge pull request #11 from xtoolkit/v_2_0_155

Version 2.1.155

templates/style-template.css → .templates/css/style.css

@@ -1,9 +1,9 @@
-/*! Micon v2.0.155 | MIT License | http://xtoolkit.github.io/Micon/ */
+/*! Micon v2.1.155 | MIT License | http://xtoolkit.github.io/Micon/ */
 
 @font-face {
     font-family: '<%= fontName %>';
     src: url('<%= fontPath %><%= fontName %>.eot?v=<%= fontVer %>');
-    src: url('<%= fontPath %><%= fontName %>.eot?#iefix&v=<%= fontVer %>') format('embedded-opentype'), url('<%= fontPath %><%= fontName %>.woff2?v=<%= fontVer %>') format('woff2'), url('<%= fontPath %><%= fontName %>.woff?v=<%= fontVer %>') format('woff'), url('<%= fontPath %><%= fontName %>.ttf?v=<%= fontVer %>') format('truetype'), url('<%= fontPath %><%= fontName %>.svg?v=<%= fontVer %>#fontawesomeregular') format('svg');
+    src: url('<%= fontPath %><%= fontName %>.eot?#iefix&v=<%= fontVer %>') format('embedded-opentype'), url('<%= fontPath %><%= fontName %>.woff2?v=<%= fontVer %>') format('woff2'), url('<%= fontPath %><%= fontName %>.woff?v=<%= fontVer %>') format('woff'), url('<%= fontPath %><%= fontName %>.ttf?v=<%= fontVer %>') format('truetype'), url('<%= fontPath %><%= fontName %>.svg?v=<%= fontVer %>#<%= fontName %>') format('svg');
     font-weight: normal;
     font-style: normal;
 }

.templates/less/animated.less

@@ -0,0 +1,34 @@
+// Animated Icons
+// --------------------------
+
+.@{<%= className %>-css-prefix}-spin {
+    -webkit-animation: <%= className %>-spin 2s infinite linear;
+    animation: <%= className %>-spin 2s infinite linear;
+}
+
+.@{<%= className %>-css-prefix}-pulse {
+    -webkit-animation: <%= className %>-spin 1s infinite steps(8);
+    animation: <%= className %>-spin 1s infinite steps(8);
+}
+@-webkit-keyframes <%= className %>-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes <%= className %>-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}

.templates/less/bordered-pulled.less

@@ -0,0 +1,44 @@
+// Bordered & Pulled
+// -------------------------
+
+.@{<%= className %>-css-prefix}-border {
+    padding: 0.2em 0.25em 0.15em;
+    border: solid 0.08em @<%= className %>-border-color;
+    border-radius: 0.1em;
+}
+
+.@{<%= className %>-css-prefix}-pull-left {
+    float: left;
+}
+
+.@{<%= className %>-css-prefix}-pull-right {
+    float: right;
+}
+
+.@{<%= className %>-css-prefix} {
+    &.@{<%= className %>-css-prefix}-pull-left {
+        margin-right: 0.3em;
+    }
+
+    &.@{<%= className %>-css-prefix}-pull-right {
+        margin-left: 0.3em;
+    }
+}
+
+.pull-right {
+    float: right;
+}
+
+.pull-left {
+    float: left;
+}
+
+.@{<%= className %>-css-prefix} {
+    &.pull-left {
+        margin-right: 0.3em;
+    }
+
+    &.pull-right {
+        margin-left: 0.3em;
+    }
+}

.templates/less/core.less

@@ -0,0 +1,11 @@
+// Base Class Definition
+// -------------------------
+
+.@{<%= className %>-css-prefix} {
+    display: inline-block;
+    font: normal normal normal @<%= className %>-font-size-base/@<%= className %>-line-height-base <%= fontName %>; // shortening font declaration
+    font-size: inherit; // can't have font-size inherit on line above, so need to override
+    text-rendering: auto; // optimizelegibility throws things off #1094
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}

.templates/less/fixed-width.less

@@ -0,0 +1,7 @@
+// Fixed Width Icons
+// -------------------------
+
+.@{<%= className %>-css-prefix}-fw {
+    width: (18em / 14);
+    text-align: center;
+}

.templates/less/icons.less

@@ -0,0 +1,10 @@
+/* Micon uses the Unicode Private Use Area (PUA) to ensure screen
+   readers do not read off random characters that represent icons */
+<% _.each(glyphs, function(glyph) {
+var xname=glyph.name;
+var temp=namedb[xname];
+%>.@{<%= className %>-css-prefix}-<%= temp.join(":before,\n.@{" + className + '-css-prefix}-') %>:before {
+     content: @<%= className %>-var-<%= glyph.name %>;
+}
+
+<% }); %>

.templates/less/larger.less

@@ -0,0 +1,24 @@
+// Icon Sizes
+// -------------------------
+/* makes the font 33% larger relative to the icon container */
+.@{<%= className %>-css-prefix}-lg {
+    font-size: (4em / 3);
+    line-height: (3em / 4);
+    vertical-align: -15%;
+}
+
+.@{<%= className %>-css-prefix}-2x {
+    font-size: 2em;
+}
+
+.@{<%= className %>-css-prefix}-3x {
+    font-size: 3em;
+}
+
+.@{<%= className %>-css-prefix}-4x {
+    font-size: 4em;
+}
+
+.@{<%= className %>-css-prefix}-5x {
+    font-size: 5em;
+}

.templates/less/list.less

@@ -0,0 +1,24 @@
+// List Icons
+// -------------------------
+
+.@{<%= className %>-css-prefix}-ul {
+    padding-left: 0;
+    margin-left: @<%= className %>-li-width;
+    list-style-type: none;
+
+    > li {
+        position: relative;
+    }
+}
+
+.@{<%= className %>-css-prefix}-li {
+    position: absolute;
+    left: -@<%= className %>-li-width;
+    width: @<%= className %>-li-width;
+    top: (2em / 14);
+    text-align: center;
+
+    &.@{<%= className %>-css-prefix}-lg {
+        left: (-@<%= className %>-li-width + (4em / 14));
+    }
+}

.templates/less/mixins.less

@@ -0,0 +1,57 @@
+// Mixins
+// --------------------------
+
+.<%= className %>-icon() {
+    display: inline-block;
+    font: normal normal normal @<%= className %>-font-size-base/@<%= className %>-line-height-base <%= fontName %>; // shortening font declaration
+    font-size: inherit; // can't have font-size inherit on line above, so need to override
+    text-rendering: auto; // optimizelegibility throws things off #1094
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.<%= className %>-icon-rotate(@degrees, @rotation) {
+    -ms-filter:  "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
+    -webkit-transform: rotate(@degrees);
+    -ms-transform: rotate(@degrees);
+    transform: rotate(@degrees);
+}
+
+.<%= className %>-icon-flip(@horiz, @rotation),
+@vert {
+    -ms-filter:  "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
+    -webkit-transform: scale(@horiz, @vert);
+    -ms-transform: scale(@horiz, @vert);
+    transform: scale(@horiz, @vert);
+}
+// Only display content to screen readers. A la Bootstrap 4.
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+
+.sr-only() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+}
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+.sr-only-focusable() {
+    &:active,
+    &:focus {
+        position: static;
+        width: auto;
+        height: auto;
+        margin: 0;
+        overflow: visible;
+        clip: auto;
+    }
+}

.templates/less/path.less

@@ -0,0 +1,13 @@
+/* FONT PATH
+ * -------------------------- */
+@font-face {
+    font-family: '<%= fontName %>';
+    src: url('@{<%= className %>-font-path}/<%= fontName %>.eot?v=@{<%= className %>-version}');
+    src: url('@{<%= className %>-font-path}/<%= fontName %>.eot?#iefix&v=@{<%= className %>-version}') format('embedded-opentype'),
+    url('@{<%= className %>-font-path}/<%= fontName %>.woff2?v=@{<%= className %>-version}') format('woff2'),
+    url('@{<%= className %>-font-path}/<%= fontName %>.woff?v=@{<%= className %>-version}') format('woff'),
+    url('@{<%= className %>-font-path}/<%= fontName %>.ttf?v=@{<%= className %>-version}') format('truetype'),
+    url('@{<%= className %>-font-path}/<%= fontName %>.svg?v=@{<%= className %>-version}#<%= fontName %>') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}

.templates/less/rotated-flipped.less

@@ -0,0 +1,33 @@
+// Rotated & Flipped Icons
+// -------------------------
+
+.@{<%= className %>-css-prefix}-rotate-90 {
+    .<%= className %>-icon-rotate(90deg, 1);
+}
+
+.@{<%= className %>-css-prefix}-rotate-180 {
+    .<%= className %>-icon-rotate(180deg, 2);
+}
+
+.@{<%= className %>-css-prefix}-rotate-270 {
+    .<%= className %>-icon-rotate(270deg, 3);
+}
+
+.@{<%= className %>-css-prefix}-flip-horizontal {
+    .<%= className %>-icon-flip(-1, 1, 0);
+}
+
+.@{<%= className %>-css-prefix}-flip-vertical {
+    .<%= className %>-icon-flip(1, -1, 2);
+}
+
+// Hook for IE8-9
+// -------------------------
+
+:root .@{<%= className %>-css-prefix}-rotate-90,
+:root .@{<%= className %>-css-prefix}-rotate-180,
+:root .@{<%= className %>-css-prefix}-rotate-270,
+:root .@{<%= className %>-css-prefix}-flip-horizontal,
+:root .@{<%= className %>-css-prefix}-flip-vertical {
+    filter: none;
+}

.templates/less/screen-reader.less

@@ -0,0 +1,10 @@
+// Screen Readers
+// -------------------------
+
+.sr-only {
+    .sr-only();
+}
+
+.sr-only-focusable {
+    .sr-only-focusable();
+}

.templates/less/stacked.less

@@ -0,0 +1,29 @@
+// Stacked Icons
+// -------------------------
+
+.@{<%= className %>-css-prefix}-stack {
+    position: relative;
+    display: inline-block;
+    width: 2em;
+    height: 2em;
+    line-height: 2em;
+    vertical-align: middle;
+}
+.@{<%= className %>-css-prefix}-stack-1x,
+.@{<%= className %>-css-prefix}-stack-2x {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    text-align: center;
+}
+.@{<%= className %>-css-prefix}-stack-1x {
+    line-height: inherit;
+}
+
+.@{<%= className %>-css-prefix}-stack-2x {
+    font-size: 2em;
+}
+
+.@{<%= className %>-css-prefix}-inverse {
+    color: @<%= className %>-inverse;
+}

.templates/less/style.less

@@ -0,0 +1,14 @@
+/*! Micon v2.1.155 | MIT License | http://xtoolkit.github.io/Micon/ */
+@import "variables.less";
+@import "mixins.less";
+@import "path.less";
+@import "core.less";
+@import "larger.less";
+@import "fixed-width.less";
+@import "list.less";
+@import "bordered-pulled.less";
+@import "animated.less";
+@import "rotated-flipped.less";
+@import "stacked.less";
+@import "icons.less";
+@import "screen-reader.less";

.templates/less/variables.less

@@ -0,0 +1,14 @@
+// Variables
+// --------------------------
+
+@<%= className %>-font-path:        "<%= fontPath %>";
+@<%= className %>-font-size-base:   14px;
+@<%= className %>-line-height-base: 1;
+@<%= className %>-css-prefix:       @<%= className %>;
+@<%= className %>-version:          "<%= fontVer %>";
+@<%= className %>-border-color:     #eee;
+@<%= className %>-inverse:          #fff;
+@<%= className %>-li-width:         (30em / 14);
+
+<% _.each(glyphs, function(glyph) { %>@<%= className %>-var-<%= glyph.name %>: "\<%= glyph.codepoint.toString(16).toUpperCase() %>";
+<% }); %>

.templates/scss/_animated.scss

@@ -0,0 +1,34 @@
+// Spinning Icons
+// --------------------------
+
+.#{$<%= className %>-css-prefix}-spin {
+    -webkit-animation: <%= className %>-spin 2s infinite linear;
+    animation: <%= className %>-spin 2s infinite linear;
+}
+
+.#{$<%= className %>-css-prefix}-pulse {
+    -webkit-animation: <%= className %>-spin 1s infinite steps(8);
+    animation: <%= className %>-spin 1s infinite steps(8);
+}
+@-webkit-keyframes <%= className %>-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}
+@keyframes <%= className %>-spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(359deg);
+        transform: rotate(359deg);
+    }
+}