@koobiq/components 17.0.0-rc.7 → 17.0.0-rc.8

package/file-upload/multiple-file-upload.component.scss

@@ -2,15 +2,12 @@
 @use 'sass:map';
 
 @use '../core/styles/tokens';
-
-@use '../core/styles/common';
 @use '../core/styles/common/tokens' as *;
 
 
 $tokens: meta.module-variables(tokens) !default;
 
 //todo нужно рефакторить со стилями тут сложно
-
 /* stylelint-disable no-descending-specificity */
 
 .kbq-multiple-file-upload .kbq-file-upload {
@@ -34,9 +31,14 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         & .dropzone__text {
+            & .multiple__header {
+                display: block;
+            }
+
             & .multiple__caption {
+                display: block;
                 padding-top: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-vertical);
-
+                // гап не применяется тк не флекс. в целом гап не нужен, тк по логике дизайна ссылка от текста отделяется пробелом
                 gap: kbq-css-variable(file-upload-size-multiple-big-text-block-content-gap-horizontal);
             }
         }
@@ -101,8 +103,8 @@ $tokens: meta.module-variables(tokens) !default;
         }
 
         .kbq-file-upload__size {
-            width: kbq-css-variable(size-7xl);
-            min-width: kbq-css-variable(size-7xl);
+            width: map.get($tokens, size-7xl);
+            min-width: map.get($tokens, size-7xl);
             text-align: left;
             flex-grow: 1;
         }
@@ -134,7 +136,7 @@ $tokens: meta.module-variables(tokens) !default;
         .kbq-file-multiple-uploaded__header-inner {
             $padding-vertical: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-vertical);
             $padding-horizontal: map.get($tokens, file-upload-size-multiple-big-grid-cell-padding-horizontal);
-            $compensation: 3px;
+            $compensation: 2px;
 
             padding:
                 calc(

package/form-field/_form-field-theme.scss

@@ -58,7 +58,7 @@
             @include kbq-form-field-state($form-field, states-focused);
 
             & .kbq-form-field__container {
-                box-shadow: 0 0 0 1px kbq-css-variable(
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(
                     form-field-states-focused-focu-outline, map.get($form-field, states-focused, focus-outline));
             }
         }
@@ -68,7 +68,7 @@
             @include kbq-form-field-state($form-field, states-error);
 
             &.cdk-focused .kbq-form-field__container {
-                box-shadow: 0 0 0 1px kbq-css-variable(
+                box-shadow: 0 0 0.1px 1px kbq-css-variable(
                     form-field-states-error-focu-outline, map.get($form-field, states-error, focus-outline));
             }
         }

package/form-field/hint.scss

@@ -8,11 +8,13 @@
     display: flex;
 
     & .kbq-icon {
+        margin-top: kbq-css-variable(hint-size-normal-margin-top);
         margin-right: kbq-css-variable(hint-size-normal-content-padding);
     }
 
     &.kbq-hint_compact {
         & .kbq-icon {
+            margin-top: kbq-css-variable(hint-size-compact-margin-top);
             margin-right: kbq-css-variable(hint-size-compact-content-padding);
         }
     }

package/icon/_icon-button-theme.scss

@@ -122,8 +122,8 @@
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0 1px map.get($theme, states, focused-color),
-                0 0 0 1px map.get($theme, states, focused-color);
+                inset 0 0 0.1px 1px map.get($theme, states, focused-color),
+                0 0 0.1px 1px map.get($theme, states, focused-color);
         }
     }
 }

package/list/list.scss

@@ -7,7 +7,6 @@
 .kbq-list,
 .kbq-list-selection {
     display: block;
-
     outline: none;
 }
 
@@ -23,11 +22,14 @@
 
     & .kbq-option-action {
         display: none;
+        height: 20px;
+        align-items: center;
     }
 
     &:not(.kbq-disabled):hover,
     &:not(.kbq-disabled).kbq-focused,
     &:not(.kbq-disabled).kbq-action-button-focused {
+
         & .kbq-option-action {
             display: flex;
         }

package/navbar/_navbar-item_horizontal.scss

@@ -40,8 +40,9 @@
     }
 
     &.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed) {
-        padding: kbq-css-variable(size-l) kbq-css-variable(size-m);
-
+        padding-right: kbq-css-variable(size-m);
+        padding-left: kbq-css-variable(size-m);
+        // (total height 48 - grey hover 32) / 2
         &:after {
             top: kbq-css-variable(size-s);
             right: 0;
@@ -50,6 +51,8 @@
         }
 
         & > .kbq-icon {
+            align-self: center;
+
             padding-right: kbq-css-variable(size-xxs);
         }
     }

package/navbar/_navbar-item_vertical.scss

@@ -5,20 +5,20 @@
 @use '../core/styles/common/tokens' as *;
 
 
-$tokens: meta.module-variables(tokens) !default;
-
-
 .kbq-navbar-item.kbq-vertical {
     align-items: flex-start;
 
     & .kbq-navbar-item__container {
-        gap: kbq-css-variable(size-m);;
+        gap: kbq-css-variable(size-m);
     }
 
     &.kbq-expanded {
         height: kbq-css-variable(size-5xl);
 
-        padding: kbq-css-variable(size-l) kbq-css-variable(size-xl);
+        align-items: center;
+
+        padding-right: kbq-css-variable(size-xl);
+        padding-left: kbq-css-variable(size-xl);
 
         gap: kbq-css-variable(size-m);
 

package/navbar/navbar-brand.scss

@@ -103,7 +103,7 @@ a.kbq-navbar-brand {
             position: absolute;
 
             left: kbq-css-variable(size-xxs);
-            bottom: - kbq-css-variable(size-4xl);
+            top: kbq-css-variable(size-4xl);
             max-width: 200px;
         }
     }

package/navbar/navbar-item.scss

@@ -24,6 +24,12 @@
         min-height: kbq-css-variable(size-l);
     }
 
+    & .kbq-button-icon {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+
     &:after {
         position: absolute;
         content: '';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "17.0.0-rc.7",
+    "version": "17.0.0-rc.8",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -19,13 +19,13 @@
     "peerDependencies": {
         "@angular/cdk": "^17.0.0",
         "@angular/forms": "^17.0.0",
-        "@koobiq/cdk": "17.0.0-rc.7",
-        "@koobiq/angular-moment-adapter": "17.0.0-rc.7",
-        "@koobiq/angular-luxon-adapter": "17.0.0-rc.7",
+        "@koobiq/cdk": "17.0.0-rc.8",
+        "@koobiq/angular-moment-adapter": "17.0.0-rc.8",
+        "@koobiq/angular-luxon-adapter": "17.0.0-rc.8",
         "@koobiq/date-formatter": "^3.1.2",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "3.0.0-rc.9",
-        "@koobiq/design-tokens": "3.0.0-rc.9",
+        "@koobiq/tokens-builder": "3.0.0-rc.11",
+        "@koobiq/design-tokens": "3.0.0-rc.11",
         "marked": "^9.0.0",
         "overlayscrollbars": "^2.2.0",
         "ngx-highlightjs": "^10.0.0"