@kizmann/nano-ui 1.0.11 → 1.0.12

package/src/form/src/form-frame/form-frame.scss

@@ -20,11 +20,34 @@
 
 .n-form-frame__menu {
     cursor: pointer;
+    position: relative;
     display: flex;
     align-items: center;
     width: 100%;
     border-radius: $md-radius;
     text-decoration: none;
+    transition: opacity 0.3s;
+}
+
+.n-form-frame--search .n-form-frame__menu:not(.on-search) {
+    opacity: 0.6;
+}
+
+.n-form-frame__menu:before {
+    content: '\00a0';
+    position: absolute;
+    top: 50%;
+    display: block;
+    width: 6px;
+    height: 6px;
+    margin-top: -3px;
+    border-radius: 500px;
+    opacity: 0;
+    transition: opacity 0.3s;
+}
+
+.n-form-frame__menu.on-search:before {
+    opacity: 1;
 }
 
 .n-form-frame__menu:not(:last-child) {
@@ -67,10 +90,19 @@
         padding: $-form-frame-size * 0.5 $-form-frame-size * 0.6;
     }
 
+    .n-form-frame--#{$suffix} .n-form-frame__search {
+        margin-bottom: $-form-frame-size * 0.4;
+    }
+
     .n-form-frame--#{$suffix} .n-form-frame__menu {
         height: $-form-frame-size;
         font-size: $-form-frame-font - 1;
         border-radius: $-form-frame-radius;
+        padding-right: $-form-frame-size * 0.6;
+    }
+
+    .n-form-frame--#{$suffix} .n-form-frame__menu:before {
+        right: $-form-frame-size * 0.3;
     }
 
     .n-form-frame--#{$suffix} .n-form-frame__menu i {
@@ -82,8 +114,4 @@
         padding: $-form-frame-size * 0.2 $-form-frame-size * 0.6 $-form-frame-size * 0.2 0;
     }
 
-    .n-form-frame--#{$suffix} .n-form-frame__body .n-form-group {
-        padding: $-form-frame-size * 0.2 $-form-frame-size * 0.6;
-    }
-
 }

package/src/form/src/form-group/form-group.scss

@@ -7,7 +7,7 @@
 
 .n-form-group:before {
     pointer-events: none;
-    z-index: -1;
+    z-index: 0;
     content: '\00a0';
     position: absolute;
     top: 0;
@@ -20,7 +20,11 @@
 }
 
 .n-form-group.on-search:before {
-    opacity: 0.15;
+    opacity: 0.1;
+}
+
+.n-form-group--collapse .n-form-group__legend {
+    cursor: pointer;
 }
 
 .n-form-group--classic .n-form-group__legend {
@@ -92,6 +96,7 @@
 
     .n-form-group--#{$suffix}.n-form-group--fieldset {
         margin-bottom: $-form-group-size;
+        padding: 0 $-form-group-size * 0.6;
     }
 
     .n-form-group--#{$suffix}.n-form-group--fieldset:first-child {
@@ -102,23 +107,23 @@
         margin-top: $-form-group-size * 1.4;
     }
 
-    .n-form-group--classic.n-form-group--#{$suffix} .n-form-group__legend {
+    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__legend {
         font-size: $-form-group-font;
         min-height: $-form-group-size * 1.2;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__legend {
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__legend {
         min-height: $-form-group-size;
         border-radius: $-form-group-radius;
         top: $-form-group-size * -0.5;
         padding: 0 $-form-group-size * 0.3;
     }
 
-    .n-form-group--classic.n-form-group--#{$suffix} .n-form-group__label span {
+    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__label span {
         font-size: $-form-group-font + 1;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__label span {
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__label span {
         font-size: $-form-group-font - 2;
     }
 
@@ -127,7 +132,7 @@
         height: $-form-group-size;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__collapse {
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__collapse {
         margin-right: $-form-group-size * -0.3;
     }
 
@@ -135,12 +140,12 @@
         margin-right: $-form-group-size * $-form-group-ratio * 0.7;
     }
 
-    .n-form-group--classic.n-form-group--#{$suffix} .n-form-group__body {
+    .n-form-group--#{$suffix}.n-form-group--classic .n-form-group__body {
         padding-top: $-form-group-size * $-form-group-ratio;
     }
 
-    .n-form-group--fieldset.n-form-group--#{$suffix} .n-form-group__body {
-        padding-top: $-form-group-size * 0.6;
+    .n-form-group--#{$suffix}.n-form-group--fieldset .n-form-group__body {
+        padding-top: $-form-group-size;
     }
 
 }

package/src/scrollbar/src/scrollbar/scrollbar.jsx

@@ -196,12 +196,12 @@ export default {
             }
         },
 
-        scrollIntoView(selector, delay = 0)
+        scrollIntoView(selector, delay = 0, offset = 0)
         {
-            Any.delay(() => this.onScrollIntoView(selector), delay);
+            Any.delay(() => this.onScrollIntoView(selector, offset), delay);
         },
 
-        onScrollIntoView(selector)
+        onScrollIntoView(selector, offset = 0)
         {
             let $el = Dom.find(this.$el).find(selector);
 

package/themes/macos/form/src/form-frame/form-frame.scss

@@ -15,6 +15,10 @@
     $-color-light: map.get($values, 'light');
     $-color-dark: map.get($values, 'dark');
 
+    .n-form-frame__menu--#{$color}.on-search:before {
+        background: $-color-base;
+    }
+
     .n-form-frame__menu--#{$color}.is-visible {
         background: rgba($-color-base, 0.15);
     }

package/themes/macos/form/src/form-group/form-group.scss

@@ -1,7 +1,7 @@
 @use "sass:map";
 @import "../../../root/vars";
 
-.n-form-group--fieldset.n-form-group--collapse {
+.n-form-group--fieldset {
     border: 1px solid $color-gray-10;
 }
 
@@ -36,7 +36,7 @@
         color: $-color-base;
     }
 
-    .n-form-group--#{$color}.on-search:before {
+    .n-form-group--#{$color}:before {
         background: linear-gradient(135deg, $-color-base 0, transparent 300px);
     }