@kizmann/nano-ui 0.7.24 → 0.7.26

package/src/rating/src/rating/rating.scss

@@ -0,0 +1,98 @@
+@import "../../../root/vars";
+
+.n-rating {
+    overflow: hidden;
+    max-width: 100%;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.n-rating__stars {
+    flex: 0 0 auto;
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.n-rating__stars span {
+    flex: 0 0 auto;
+    position: relative;
+    display: block;
+}
+
+.n-rating__stars span:before,
+.n-rating__stars span:after {
+    content: '\00a0';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-repeat: no-repeat;
+}
+
+.n-rating__stars span:before {
+    z-index: 2;
+    left: 0;
+    background-position: left center;
+}
+
+.n-rating__stars span:after {
+    z-index: 1;
+    right: 0;
+    background-position: right center;
+}
+
+.n-rating__stars span.is-null:before {
+    width: 0;
+}
+
+.n-rating__stars span.is-half:before {
+    width: 50%;
+}
+
+.n-rating__stars span.is-full:before {
+    width: 100%;
+}
+
+.n-rating__value {
+    overflow: hidden;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+@each $suffix, $values in $form {
+
+    $-rating-font: map-get($values, 'font');
+    $-rating-size: map-get($values, 'size');
+    $-rating-radius: map-get($values, 'radius');
+    $-rating-ratio: map-get($values, 'ratio');
+
+    $-rating-star: $-rating-size * $-rating-ratio * 1.2;
+
+    .n-rating--#{$suffix} {
+        font-size: $-rating-font;
+    }
+
+    .n-rating--#{$suffix} .n-rating__stars span {
+        width: $-rating-star;
+        height: $-rating-star;
+    }
+
+    .n-rating--#{$suffix} .n-rating__stars span:not(:last-child) {
+        margin-right: $-rating-star / 4;
+    }
+
+    .n-rating--#{$suffix} .n-rating__stars span:before,
+    .n-rating--#{$suffix} .n-rating__stars span:after {
+        background-size: $-rating-star $-rating-star;
+    }
+
+    .n-rating--#{$suffix} .n-rating__value {
+        margin-left: $-rating-star;
+    }
+
+}

package/src/switch/src/switch/switch.scss

@@ -48,6 +48,7 @@
         width: $-switch-frame;
         height: $-switch-size - 14;
     }
+
     $-switch-circle: $-switch-size - 20;
     
     .n-switch--#{$suffix} .n-switch__switch span {

package/themes/light/index.scss

@@ -28,6 +28,7 @@
 @import "./collapse/index";
 @import "./info/index";
 @import "./map/index";
+@import "./rating/index";
 
 @import "./demo/index";
 

package/themes/light/rating/index.scss

@@ -0,0 +1 @@
+@import "./src/rating/rating";

package/themes/light/rating/src/rating/rating.scss

@@ -0,0 +1,18 @@
+@import "../../../root/vars";
+
+.n-rating__stars span:before,
+.n-rating__stars span:after {
+    background-image: svg-load('star-default.svg', fill=$color-gray-10);
+}
+
+@each $color, $values in $colors {
+
+    $-color-base: map_get($values, 'base');
+    $-color-light: map_get($values, 'light');
+    $-color-dark: map_get($values, 'dark');
+
+    .n-rating--#{$color} .n-rating__stars span:before {
+        background-image: svg-load('star-default.svg', fill=$-color-base);
+    }
+
+}

package/themes/light/root/image/star-default.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
+<g>
+	<path d="M15.891,0.561l4.097,8.408l9.16,1.348c0.815,0.12,1.14,1.135,0.551,1.717l-6.629,6.545l1.565,9.242
+		c0.139,0.822-0.713,1.449-1.442,1.061L15,24.519l-8.193,4.363c-0.729,0.388-1.581-0.239-1.442-1.061l1.565-9.242l-6.629-6.545
+		c-0.59-0.582-0.264-1.597,0.551-1.717l9.16-1.348l4.097-8.408C14.473-0.187,15.527-0.187,15.891,0.561z"/>
+</g>
+</svg>