feat: rating styles

chore: update rating precision part class for rtl
telerik · Jul 24, 2019 · 1104050 · 1104050
1 parent 9db4dd4
commit 1104050
Show file tree

Hide file tree

Showing 16 changed files with 385 additions and 2 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -1338,6 +1338,25 @@ $drawer-selected-hover-text: $selected-text !default;
 $drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;
 
 
+// Rating
+$rating-item-padding-x: $padding-x !default;
+$rating-item-padding-y: $padding-y !default;
+
+$rating-label-margin-x: $padding-x !default;
+$rating-label-margin-y: $padding-y !default;
+$rating-label-line-height: $line-height-lg !default;
+
+$rating-icon-size: ($icon-size * 1.5) !default;
+
+$rating-icon-text: try-lighten($base-text, 55%) !default;
+$rating-icon-selected-text: $selected-bg !default;
+$rating-icon-hover-text: $selected-bg !default;
+$rating-icon-focused-text: $selected-bg !default;
+
+$rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .2) !default;
+$rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .5) !default;
+
+
 // Spreadsheet
 $spreadsheet-insert-image-dialog-border-style: dashed !default;
 $spreadsheet-insert-image-dialog-border-width: 2px !default;

diff --git a/packages/bootstrap/scss/all.scss b/packages/bootstrap/scss/all.scss
@@ -36,6 +36,7 @@
 @import "switch";
 @import "maskedtextbox";
 @import "listbox";
+@import "rating";
 
 // Dataviz
 @import "dataviz";

diff --git a/packages/bootstrap/scss/rating.scss b/packages/bootstrap/scss/rating.scss
@@ -0,0 +1,11 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+
+
+// Component
+@import "rating/layout";
+@import "rating/theme";
diff --git a/packages/bootstrap/scss/rating/_layout.scss b/packages/bootstrap/scss/rating/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/rating/layout";
diff --git a/packages/bootstrap/scss/rating/_theme.scss b/packages/bootstrap/scss/rating/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/rating/theme";
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -1323,6 +1323,25 @@ $drawer-selected-hover-text: $selected-hover-color !default;
 $drawer-selected-hover-bg: $selected-hover-bg !default;
 
 
+// Rating
+$rating-item-padding-x: $padding-x !default;
+$rating-item-padding-y: $padding-y !default;
+
+$rating-label-margin-x: $padding-x !default;
+$rating-label-margin-y: $padding-y !default;
+$rating-label-line-height: $line-height-lg !default;
+
+$rating-icon-size: ($icon-size * 1.5) !default;
+
+$rating-icon-text: lighten($base-text, 45%) !default;
+$rating-icon-selected-text: $selected-bg !default;
+$rating-icon-hover-text: $selected-bg !default;
+$rating-icon-focused-text: $selected-bg !default;
+
+$rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
+$rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;
+
+
 // Spreadsheet
 $spreadsheet-insert-image-dialog-border-style: dashed !default;
 $spreadsheet-insert-image-dialog-border-width: 2px !default;

diff --git a/packages/default/scss/all.scss b/packages/default/scss/all.scss
@@ -35,7 +35,7 @@
 @import "switch";
 @import "maskedtextbox";
 @import "listbox";
-
+@import "rating";
 
 // Dataviz
 @import "dataviz";

diff --git a/packages/default/scss/rating.scss b/packages/default/scss/rating.scss
@@ -0,0 +1,11 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+
+
+// Component
+@import "rating/layout";
+@import "rating/theme";
diff --git a/packages/default/scss/rating/_layout.scss b/packages/default/scss/rating/_layout.scss
@@ -0,0 +1,69 @@
+@include exports("rating/layout") {
+    .k-rating {
+        display: inline-flex;
+        box-sizing: border-box;
+        white-space: nowrap;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        outline: 0;
+    }
+
+    .k-rating-container {
+        flex: 0 0 auto;
+        position: relative;
+        box-sizing: border-box;
+
+        .k-rating-item {
+            display: inline-flex;
+            position: relative;
+            padding: $rating-item-padding-y $rating-item-padding-x;
+            align-items: center;
+            vertical-align: middle;
+            margin: 0;
+            outline: 0;
+            overflow: hidden;
+            transition: color 200ms ease-out 0s;
+
+            * {
+                pointer-events: none;
+            }
+
+            .k-icon {
+                font-size: $rating-icon-size;
+            }
+
+            .k-rating-precision-part {
+                display: flex;
+                position: absolute;
+                top: $rating-item-padding-y;
+                left: $rating-item-padding-x;
+                overflow: hidden;
+
+                .k-ie9 & {
+                    top: auto;
+                }
+            }
+
+            .k-ie9 & {
+                vertical-align: auto;
+            }
+        }
+    }
+
+    .k-rating-label {
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+        line-height: $rating-label-line-height;
+        margin: $rating-label-margin-y $rating-label-margin-x;
+    }
+
+    .k-rtl,
+    [dir="rtl"] {
+        .k-rating-precision-part  {
+            left: auto;
+            right: $rating-item-padding-x;
+        }
+    }
+}
diff --git a/packages/default/scss/rating/_theme.scss b/packages/default/scss/rating/_theme.scss
@@ -0,0 +1,37 @@
+@include exports("rating/theme") {
+    .k-rating {
+        &:focus,
+        &.k-state-focused {
+
+            .k-rating-item {
+                > .k-icon {
+                    text-shadow: $rating-icon-focused-shadow;
+                }
+
+                &.k-state-selected > .k-icon {
+                    text-shadow: $rating-icon-focused-selected-shadow;
+                }
+            }
+        }
+    }
+
+    .k-rating-item {
+        color: $rating-icon-text;
+
+        &.k-state-selected {
+            color: $rating-icon-selected-text;
+        }
+
+        &:hover,
+        &.k-state-hover {
+            color: $rating-icon-hover-text;
+            cursor: pointer;
+        }
+
+        &:focus,
+        &.k-state-focused {
+            color: $rating-icon-focused-text;
+        }
+    }
+}
+
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -1423,6 +1423,25 @@ $drawer-selected-hover-text:  $secondary !default;
 $drawer-selected-hover-bg: $hovered-bg !default;
 
 
+// Rating
+$rating-item-padding-x: $padding-x-sm !default;
+$rating-item-padding-y: $padding-y !default;
+
+$rating-label-margin-x: $padding-x-sm !default;
+$rating-label-margin-y: $padding-y !default;
+$rating-label-line-height: $line-height-lg !default;
+
+$rating-icon-size: ($icon-size * 1.5) !default;
+
+$rating-icon-text: lighten($base-text, 55%) !default;
+$rating-icon-selected-text: $primary-darker !default;
+$rating-icon-hover-text: $primary-darker  !default;
+$rating-icon-focused-text: $primary-darker  !default;
+
+$rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .2) !default;
+$rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($primary, .5) !default;
+
+
 // Spreadsheet
 $spreadsheet-insert-image-dialog-border-style: dashed !default;
 $spreadsheet-insert-image-dialog-border-width: 2px !default;

diff --git a/packages/material/scss/all.scss b/packages/material/scss/all.scss
@@ -35,7 +35,7 @@
 @import "switch";
 @import "maskedtextbox";
 @import "listbox";
-
+@import "rating";
 
 // Dataviz
 @import "dataviz";

diff --git a/packages/material/scss/rating.scss b/packages/material/scss/rating.scss
@@ -0,0 +1,11 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+
+
+// Component
+@import "rating/layout";
+@import "rating/theme";
diff --git a/packages/material/scss/rating/_layout.scss b/packages/material/scss/rating/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/rating/layout";
diff --git a/packages/material/scss/rating/_theme.scss b/packages/material/scss/rating/_theme.scss
@@ -0,0 +1,2 @@
+@import "~@progress/kendo-theme-default/scss/rating/theme";
+