ngx-tethys 18.0.0 → 18.0.2

package/segment/styles/mixin.scss

@@ -17,11 +17,14 @@
             }
         }
 
-        @if ($size == xs or $size == sm or $size == md) {
-            font-size: variables.$font-size-sm;
-        } @else {
-            font-size: variables.$font-size-base;
+        & {
+            @if ($size == xs or $size == sm or $size == md) {
+                font-size: variables.$font-size-sm;
+            } @else {
+                font-size: variables.$font-size-base;
+            }
         }
+
     }
     &-#{$size} &-item-icon {
         @if ($size == xs) {
@@ -43,9 +46,9 @@
     &:hover,
     &:focus {
         color: variables.$segment-disabled-color;
+        cursor: variables.$disabled-cursor;
         .icon-with-text {
             color: variables.$segment-disabled-color;
         }
-        cursor: variables.$disabled-cursor;
     }
 }

package/segment/styles/segment.scss

@@ -44,10 +44,10 @@
         &:not(.disabled) {
             &:hover,
             &:focus {
+                color: variables.$segment-hover-color;
                 .#{variables.$thy-prefix}-segment-item-icon {
                     color: variables.$segment-item-only-icon-hover-color;
                 }
-                color: variables.$segment-hover-color;
                 .icon-with-text {
                     color: variables.$segment-icon-with-text-hover-color;
                 }

package/shared/option/styles/option.mixin.scss

@@ -29,8 +29,6 @@
 }
 
 @mixin thy-option($hover-bg-color: variables.$gray-100, $color: variables.$body-color) {
-    @include thy-option-common-layout();
-    @include thy-option-text-icon-primary();
     min-height: 40px;
     color: $color;
     cursor: variables.$hand-cursor;
@@ -40,10 +38,12 @@
         left: 20px;
         right: 20px;
     }
+    @include thy-option-common-layout();
+    @include thy-option-text-icon-primary();
 
     // use in tree-select
     .prefix-icon {
-        margin-right: 4px;
+        margin-right: 8px;
         color: variables.$gray-500;
     }
 
@@ -110,11 +110,11 @@
 }
 
 @mixin thy-multiple-option($hover-active-bg-color: variables.$gray-100) {
-    @include thy-option-text-icon-default();
     padding: {
         left: 20px;
         right: 35px;
     }
+    @include thy-option-text-icon-default();
 
     .checked-icon {
         visibility: hidden;
@@ -177,8 +177,6 @@
 
 @mixin thy-grid-option {
     .thy-grid-option {
-        @include thy-option-common-layout();
-        @include thy-option-text-icon-default();
         flex-direction: column;
         vertical-align: middle;
         justify-content: center;
@@ -191,6 +189,8 @@
         border: solid 1px variables.$gray-200;
         cursor: variables.$hand-cursor;
         outline-style: none;
+        @include thy-option-common-layout();
+        @include thy-option-text-icon-default();
 
         .checked-icon {
             visibility: hidden;

package/shared/option/styles/select-dropdown.scss

@@ -24,10 +24,12 @@ $optionsSize: 'sm', 'default', 'md', 'lg';
     }
 
     .thy-option-item-group {
+        flex-direction: column;
+
         &.thy-select-option-group-hidden {
             display: none;
         }
-        flex-direction: column;
+
         .group-name {
             width: 100%;
             height: 30px;

package/shared/select/select-control/select-control.scss

@@ -5,12 +5,12 @@
 
 .select-control {
     position: relative;
+    padding-right: 26px;
     @include select.select-control-size(
         variables.$tag-height-md,
         variables.$select-control-padding-y-default,
         variables.$select-control-height-default
     );
-    padding-right: 26px;
 
     &.form-control-xs {
         @include select.select-control-size(

package/space/examples/align/align.component.scss

@@ -1,3 +1,5 @@
+@use 'variables.scss' as variables2;
+
 :host {
     &.space-align-container {
         display: flex;
@@ -6,14 +8,13 @@
         .space-align-example {
             border: 1px solid #348fe4;
             padding: 2px 4px;
-            // margin-right: 10px;
             margin: 8px 4px;
         }
     }
 
     .block {
         height: 50px;
-        background: #eee;
+        background: variables2.$gray-200;
         padding: 10px;
     }
 }

package/statistic/examples/prefix-suffix/prefix-suffix.component.scss

@@ -1,8 +1,10 @@
+@use 'variables.scss' as variables2;
+
 .statistic-container {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-gap: 10px;
 }
 h4 {
-    color: #aaa;
+    color: variables2.$gray-500;
 }

package/styles/bootstrap/_type.scss

@@ -53,30 +53,30 @@ h6,
 }
 
 .lead {
-    @include rfs.font-size(variables.$lead-font-size);
     font-weight: variables.$lead-font-weight;
+    @include rfs.font-size(variables.$lead-font-size);
 }
 
 // Type display classes
 .display-1 {
-    @include rfs.font-size(variables.$display1-size);
     font-weight: variables.$display1-weight;
     line-height: variables.$display-line-height;
+    @include rfs.font-size(variables.$display1-size);
 }
 .display-2 {
-    @include rfs.font-size(variables.$display2-size);
     font-weight: variables.$display2-weight;
     line-height: variables.$display-line-height;
+    @include rfs.font-size(variables.$display2-size);
 }
 .display-3 {
-    @include rfs.font-size(variables.$display3-size);
     font-weight: variables.$display3-weight;
     line-height: variables.$display-line-height;
+    @include rfs.font-size(variables.$display3-size);
 }
 .display-4 {
-    @include rfs.font-size(variables.$display4-size);
     font-weight: variables.$display4-weight;
     line-height: variables.$display-line-height;
+    @include rfs.font-size(variables.$display4-size);
 }
 
 //
@@ -96,8 +96,8 @@ hr {
 
 small,
 .small {
-    @include rfs.font-size(variables.$small-font-size);
     font-weight: variables.$font-weight-normal;
+    @include rfs.font-size(variables.$small-font-size);
 }
 
 mark,
@@ -132,8 +132,8 @@ mark,
 
 // Builds on `abbr`
 .initialism {
-    @include rfs.font-size(90%);
     text-transform: uppercase;
+    @include rfs.font-size(90%);
 }
 
 // Blockquotes
@@ -144,8 +144,8 @@ mark,
 
 .blockquote-footer {
     display: block;
-    @include rfs.font-size(variables.$blockquote-small-font-size);
     color: variables.$blockquote-small-color;
+    @include rfs.font-size(variables.$blockquote-small-font-size);
 
     &::before {
         content: '\2014\00A0'; // em dash, nbsp

package/styles/bootstrap/mixins/_transition.scss

@@ -17,7 +17,9 @@
 
     @if variables.$enable-transitions {
         @if list.nth($transition, 1) != null {
-            transition: $transition;
+            & {
+                transition: $transition;
+            }
         }
 
         @if variables.$enable-prefers-reduced-motion-media-query and list.nth($transition, 1) != null and list.nth($transition, 1) != none {

package/styles/mixins/close.scss

@@ -15,7 +15,10 @@
 }
 
 @mixin set-close-link-size($size: variables.$font-size-base) {
-    font-size: $size !important;
+    & {
+        font-size: $size !important;
+    }
+
     i {
         font-size: $size;
     }

package/styles/mixins/shadow.scss

@@ -1,7 +1,9 @@
 @use "../variables.scss";
 
 @mixin box-shadow($value) {
-    box-shadow: $value;
+    & {
+        box-shadow: $value;
+    }
 }
 
 @mixin item-box-shadow($color: rgba(0, 0, 0, 0.08)) {

package/styles/mixins/tables.scss

@@ -1,169 +1,6 @@
-@use "sass:color";
-@use "../mixins/hover";
-@use "../variables";
-@use "shadow";
-
-// Tables
-
-@mixin table-row-variant($state, $background) {
-    // Exact selectors below required to override `.table-striped` and prevent
-    // inheritance to nested tables.
-    .table-#{$state} {
-        &,
-        > th,
-        > td {
-            background-color: $background;
-        }
-    }
-
-    // Hover states for `.table-hover`
-    // Note: this is not available for cells or rows within `thead` or `tfoot`.
-    .table-hover {
-        $hover-background: color.adjust($background, $lightness: -5%);
-
-        .table-#{$state} {
-            @include hover.hover {
-                background-color: $hover-background;
-
-                > td,
-                > th {
-                    background-color: $hover-background;
-                }
-            }
-        }
-    }
-}
-
-@mixin table-hover-box-shadow($color) {
-    @include shadow.box-shadow(0px 0px 8px 2px $color);
-}
-
-@mixin table-set-padding-space($first-last-space-width: 20px) {
-    $table-first-last-padding: 15 + $first-last-space-width;
-    thead {
-        tr {
-            th {
-                &:first-child {
-                    padding-left: $table-first-last-padding;
-                    position: relative;
-                    &:before {
-                        @include table-cover-item(-1px, '', 0px, '', variables.$white, $first-last-space-width);
-                    }
-                }
-                &:last-child {
-                    padding-right: $table-first-last-padding;
-                    position: relative;
-                    &:before {
-                        @include table-cover-item(-1px, '', '', 0px, variables.$white, $first-last-space-width);
-                    }
-                }
-            }
-        }
-    }
-    tbody {
-        tr {
-            &:first-child {
-                td:first-child {
-                    padding-left: $table-first-last-padding;
-                    position: relative;
-                }
-                td:last-child {
-                    padding-right: $table-first-last-padding;
-                    position: relative;
-                }
-            }
-            &:last-child {
-                td {
-                    &:first-child {
-                        &:after {
-                            @include table-cover-item('', -1px, 0, '', variables.$white, $first-last-space-width);
-                        }
-                    }
-                    &:last-child {
-                        &:before {
-                            @include table-cover-item('', -1px, '', 0, variables.$white, $first-last-space-width);
-                        }
-                    }
-                }
-            }
-            td {
-                &:first-child {
-                    padding-left: $table-first-last-padding;
-                    position: relative;
-                    &:before {
-                        @include table-cover-item(-1px, '', 0, '', variables.$white, $first-last-space-width);
-                    }
-                }
-                &:last-child {
-                    padding-right: $table-first-last-padding;
-                    position: relative;
-                    &:after {
-                        @include table-cover-item(-1px, '', '', 0, variables.$white, $first-last-space-width);
-                    }
-                }
-            }
-        }
-    }
-}
-
-@mixin table-cover-item($top, $bottom, $left, $right, $color: $color-white, $width: 20px) {
-    content: '';
-    width: $width;
-    position: absolute;
-    top: $top;
-    bottom: $bottom;
-    left: $left;
-    right: $right;
-    background: $color;
-    height: 1px;
-}
-
-@mixin table-hover-set-space-none() {
-    tbody {
-        tr {
-            //   &:first-child {
-            //     &.active,
-            //     &:hover {
-            //       td {
-            //         &:first-child,
-            //         &:last-child {
-            //           &:before,
-            //           &:after {
-            //             display: block;
-            //           }
-            //         }
-            //       }
-            //     }
-            //   }
-            &:hover,
-            &.active {
-                td {
-                    &:first-child,
-                    &:last-child {
-                        &:before,
-                        &:after {
-                            display: none;
-                        }
-                    }
-                }
-                & + tr {
-                    td {
-                        &:first-child {
-                            &:before {
-                                display: none;
-                            }
-                        }
-                        &:last-child {
-                            &:after {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
+@use '../mixins/hover';
+@use '../variables';
+@use 'shadow';
 
 @mixin table-set-header(
     $thead-text-align,

package/styles/modules/cdk/drag-drop.scss

@@ -73,8 +73,8 @@
 .thy-sortable-drag,
 .cdk-drag-preview {
     box-sizing: border-box;
-    @include shadow.item-box-shadow();
     background: variables.$white !important;
+    @include shadow.item-box-shadow();
 }
 
 .cdk-drag-animating {

package/styles/modules/link.scss

@@ -90,8 +90,8 @@ a {
     }
 
     &.disabled {
-        @include link.link-variant(null, none, null, none);
         opacity: variables.$link-disabled-opacity;
         pointer-events: none;
+        @include link.link-variant(null, none, null, none);
     }
 }

package/styles/modules/tables.scss

@@ -179,7 +179,6 @@
         @include hover.hover {
             cursor: variables.$hand-cursor;
             background-color: variables.$table-hover-color;
-            // @include table-hover-box-shadow($table-hover-color);
         }
     }
 }