@progress/kendo-font-icons 0.1.0 → 0.3.0

package/scss/_icons.scss

@@ -105,7 +105,7 @@
 .k-i-grid-layout::before { content: "\e024"; } 
 .k-i-group::before { content: "\e025"; } 
 .k-i-ungroup::before { content: "\e026"; } 
-.k-i-handler-drag::before { content: "\e027"; } 
+.k-i-handle-drag::before { content: "\e027"; } 
 .k-i-layout::before { content: "\e028"; } 
 .k-i-layout-1-by-4::before { content: "\e029"; } 
 .k-i-layout-2-by-2::before { content: "\e02a"; } 
@@ -126,6 +126,66 @@
 .k-i-overlap::before { content: "\e033"; } 
 .k-i-home::before { content: "\e034"; } 
 .k-i-root::before { content: "\e034"; } 
+.k-i-arrows-left-right::before { content: "\e035"; } 
+.k-i-arrows-top-bottom::before { content: "\e036"; } 
+.k-i-border-radius-bottom-left::before { content: "\e037"; } 
+.k-i-border-radius-bottom-right::before { content: "\e038"; } 
+.k-i-border-radius-top-left::before { content: "\e039"; } 
+.k-i-border-radius-top-right::before { content: "\e03a"; } 
+.k-i-border-radius::before { content: "\e03b"; } 
+.k-i-border-style-bottom::before { content: "\e03c"; } 
+.k-i-border-style-left::before { content: "\e03d"; } 
+.k-i-border-style-right::before { content: "\e03e"; } 
+.k-i-border-style-top::before { content: "\e03f"; } 
+.k-i-border-style::before { content: "\e040"; } 
+.k-i-box-sizing::before { content: "\e041"; } 
+.k-i-chevron-double-down::before { content: "\e042"; } 
+.k-i-chevron-double-left::before { content: "\e043"; } 
+.k-i-chevron-double-right::before { content: "\e044"; } 
+.k-i-chevron-double-up::before { content: "\e045"; } 
+.k-i-data-ods::before { content: "\e046"; } 
+.k-i-display-Inline-block::before { content: "\e047"; } 
+.k-i-display-block::before { content: "\e048"; } 
+.k-i-display-flex::before { content: "\e049"; } 
+.k-i-display-inline-flex::before { content: "\e04a"; } 
+.k-i-droplet-slider::before { content: "\e04b"; } 
+.k-i-color-canvas::before { content: "\e04b"; } 
+.k-i-file-report::before { content: "\e04c"; } 
+.k-i-gap-column::before { content: "\e04d"; } 
+.k-i-gap-row::before { content: "\e04e"; } 
+.k-i-handle-resize-alt::before { content: "\e04f"; } 
+.k-i-handle-resize::before { content: "\e050"; } 
+.k-i-images::before { content: "\e051"; } 
+.k-i-letter-space::before { content: "\e052"; } 
+.k-i-line-height::before { content: "\e053"; } 
+.k-i-list-latin-big::before { content: "\e054"; } 
+.k-i-list-latin-small::before { content: "\e055"; } 
+.k-i-list-roman-big::before { content: "\e056"; } 
+.k-i-list-roman-small::before { content: "\e057"; } 
+.k-i-list-unordered-outline::before { content: "\e058"; } 
+.k-i-list-unordered-square::before { content: "\e059"; } 
+.k-i-max-height::before { content: "\e05a"; } 
+.k-i-max-width::before { content: "\e05b"; } 
+.k-i-min-height::before { content: "\e05c"; } 
+.k-i-min-width::before { content: "\e05d"; } 
+.k-i-outline-offset::before { content: "\e05e"; } 
+.k-i-outline-width::before { content: "\e05f"; } 
+.k-i-padding-bottom::before { content: "\e060"; } 
+.k-i-padding-left::before { content: "\e061"; } 
+.k-i-padding-right::before { content: "\e062"; } 
+.k-i-padding-top::before { content: "\e063"; } 
+.k-i-padding::before { content: "\e064"; } 
+.k-i-position-bottom::before { content: "\e065"; } 
+.k-i-position-left::before { content: "\e066"; } 
+.k-i-position-right::before { content: "\e067"; } 
+.k-i-position-top::before { content: "\e068"; } 
+.k-i-regular-expression::before { content: "\e069"; } 
+.k-i-replace-all::before { content: "\e06a"; } 
+.k-i-replace-single::before { content: "\e06b"; } 
+.k-i-report-element::before { content: "\e06c"; } 
+.k-i-right-double-quotes::before { content: "\e06d"; } 
+.k-i-blockquote::before { content: "\e06d"; } 
+.k-i-whole-word::before { content: "\e06e"; } 
 .k-i-undo::before { content: "\e100"; } 
 .k-i-undo-large::before { content: "\e100"; } 
 .k-i-redo::before { content: "\e101"; } 
@@ -441,7 +501,7 @@
 .k-i-snap-grid::before { content: "\e53a"; } 
 .k-i-snap-to-gridlines::before { content: "\e53b"; } 
 .k-i-snap-to-snaplines::before { content: "\e53c"; } 
-.k-i-dimentions::before { content: "\e53d"; } 
+.k-i-dimensions::before { content: "\e53d"; } 
 .k-i-align-self-stretch::before { content: "\e53e"; } 
 .k-i-align-stretch-element-horizontal::before { content: "\e53e"; } 
 .k-i-align-self-stretch-alt::before { content: "\e53f"; } 
@@ -859,7 +919,9 @@
 .k-i-file-h::before { content: "\e922"; } 
 .k-i-subreport::before { content: "\e923"; } 
 .k-i-data::before { content: "\e924"; } 
+.k-i-file-header::before { content: "\e925"; } 
 .k-i-report-header-section::before { content: "\e925"; } 
+.k-i-file-footer::before { content: "\e926"; } 
 .k-i-report-footer-section::before { content: "\e926"; } 
 .k-i-group-header-section::before { content: "\e927"; } 
 .k-i-group-footer-section::before { content: "\e928"; } 
@@ -896,6 +958,15 @@
 .k-i-files-validation::before { content: "\e945"; } 
 .k-i-data-rest::before { content: "\e946"; } 
 .k-i-file-typescript::before { content: "\e947"; } 
+.k-i-table-position-start::before { content: "\e948"; } 
+.k-i-table-position-left::before { content: "\e948"; } 
+.k-i-table-position-center::before { content: "\e949"; } 
+.k-i-table-position-end::before { content: "\e94a"; } 
+.k-i-table-position-right::before { content: "\e94a"; } 
+.k-i-list-roman-upper::before { content: "\e94b"; } 
+.k-i-list-roman-lower::before { content: "\e94c"; } 
+.k-i-import::before { content: "\e94d"; } 
+.k-i-export::before { content: "\e94e"; } 
 .k-i-graph::before { content: "\ea00"; } 
 .k-i-chart-column-clustered::before { content: "\ea01"; } 
 .k-i-chart-column-stacked::before { content: "\ea02"; } 

package/scss/_variables.scss

@@ -1,6 +1,8 @@
-$ki-embed-font:     false !default;
-$ki-font-file-url:  "kendo-font-icons.ttf" !default;
-$ki-font-url:       $ki-font-file-url !default;
+$ki-font-family: "WebComponentsIcons" !default;
+$ki-icon-size: 16px !default;
 
-$ki-css-prefix:     "k-i-" !default;
-$ki-icon-size:      16px !default;
+$ki-embed-font: false !default;
+$ki-font-file-url: "kendo-font-icons.ttf" !default;
+$ki-font-url: if( $ki-embed-font == true, $ki-font-data-url, $ki-font-file-url ) !default;
+
+$ki-css-prefix: "k-i-" !default;

package/scss/index.scss

@@ -1,12 +1,79 @@
-@import "_variables.scss";
+
 @import "_font.scss";
+@import "_variables.scss";
+
+// Keep this as a root selector, because it doesn't work when nested inside selector
+@at-root {
+    @font-face {
+        font-family: $ki-font-family;
+        font-style: normal;
+        font-weight: normal;
+        src: url( "#{$ki-font-url}" ) format( "truetype" );
+    }
+}
 
-@font-face {
-    font-family: "kendo-font-icons";
+// Font icon
+.k-icon {
+    width: 1em;
+    height: 1em;
+    outline: 0;
+    font-size: $ki-icon-size;
+    font-family: $ki-font-family;
     font-style: normal;
+    font-variant: normal;
     font-weight: normal;
-    src: url( "#{$ki-font-url}" ) format( "truetype" );
+    line-height: 1;
+    speak: none;
+    text-transform: none;
+    text-decoration: none;
+    flex-shrink: 0;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}
+
+
+// Svg icon
+.k-svg-icon {
+    width: 1em;
+    height: 1em;
+    outline: 0;
+    line-height: 1;
+    display: inline-flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    position: relative;
+
+    > svg {
+        fill: currentColor;
+        flex: 1 1 auto;
+    }
+}
+
+
+.k-i-none::before {
+    display: none !important; // stylelint-disable-line
 }
 
-@import "_core.scss";
+
+// Icon sizes
+.k-icon-xs { font-size: ( calc( #{$ki-icon-size} * .5 ) ); }
+.k-icon-sm { font-size: ( calc( #{$ki-icon-size} * .75 ) ); }
+.k-icon-md { font-size: ( calc( #{$ki-icon-size} * 2 ) ); }
+.k-icon-lg { font-size: ( calc( #{$ki-icon-size} * 3 ) ); }
+.k-icon-xl { font-size: ( calc( #{$ki-icon-size} * 4 ) ); }
+
+
 @import "_icons.scss";

package/CHANGELOG.md

@@ -1,46 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# 0.1.0 (2020-10-15)
-
-
-### Features
-
-* add data-rest and typescript icons ([53e9761](https://github.com/telerik/kendo-icons/commit/53e9761e6744a83e9d787708d85c5716dfb4a21b))
-
-
-
-
-
-## 0.0.5 (2020-09-15)
-
-
-### Bug Fixes
-
-* add missing icon aliases ([6abd292](https://github.com/telerik/kendo-icons/commit/6abd2928d22f03c82c9c7a12958f16ac78f9c073))
-
-
-
-
-
-## 0.0.4 (2020-09-15)
-
-**Note:** Version bump only for package @progress/kendo-font-icons
-
-
-
-
-
-## 0.0.3 (2020-09-14)
-
-**Note:** Version bump only for package @progress/kendo-font-icons
-
-
-
-
-
-## 0.0.2 (2020-09-11)
-
-**Note:** Version bump only for package @progress/kendo-font-icons

package/scss/_core.scss

@@ -1,62 +0,0 @@
-// Font icon
-.k-icon {
-    width: 1em;
-    height: 1em;
-    outline: 0;
-    font-size: $ki-icon-size;
-    font-family: "kendo-font-icons";
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: 1;
-    speak: none;
-    text-transform: none;
-    text-decoration: none;
-    display: inline-flex;
-    vertical-align: middle;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-
-    &::before {
-        vertical-align: baseline;
-    }
-
-    &:hover,
-    &:focus {
-        text-decoration: none;
-    }
-}
-
-
-// Svg icon
-.k-svg-icon {
-    width: 1em;
-    height: 1em;
-    outline: 0;
-    line-height: 1;
-    display: inline-flex;
-    vertical-align: middle;
-
-    > svg {
-        fill: currentColor;
-        flex: 1 1 auto;
-    }
-}
-
-
-.k-i-none {
-    color: transparent;
-
-    &::before {
-        content: "";
-        display: none;
-    }
-}
-
-
-// Icon sizes
-.k-icon-xs { font-size: ( $ki-icon-size * .5 ); }
-.k-icon-sm { font-size: ( $ki-icon-size * .75 ); }
-.k-icon-md { font-size: ( $ki-icon-size * 2 ); }
-.k-icon-lg { font-size: ( $ki-icon-size * 3 ); }
-.k-icon-xl { font-size: ( $ki-icon-size * 4 ); }