@koobiq/components 16.0.0-beta.1

package/modal/modal.type.d.ts

@@ -0,0 +1,61 @@
+import { OverlayRef } from '@angular/cdk/overlay';
+import { EventEmitter, TemplateRef, Type } from '@angular/core';
+export type OnClickCallback<T> = ((instance: T) => (false | void | {}) | Promise<false | void | {}>);
+export type ModalType = 'default' | 'confirm' | 'custom';
+export type ConfirmType = 'confirm' | 'success' | 'warn';
+export declare enum ModalSize {
+    Small = "small",
+    Medium = "medium",
+    Normal = "medium",
+    Large = "large"
+}
+export interface IModalOptions<T = any, R = any> {
+    mcModalType?: ModalType;
+    mcVisible?: boolean;
+    mcZIndex?: number;
+    mcWidth?: number | string;
+    mcSize?: ModalSize;
+    mcWrapClassName?: string;
+    mcClassName?: string;
+    mcStyle?: object;
+    mcTitle?: string | TemplateRef<{}>;
+    mcContent?: string | TemplateRef<{}> | Type<T>;
+    mcComponent?: Type<T>;
+    mcComponentParams?: any;
+    mcClosable?: boolean;
+    mcMask?: boolean;
+    mcMaskClosable?: boolean;
+    mcMaskStyle?: object;
+    mcBodyStyle?: object;
+    mcFooter?: string | TemplateRef<{}> | IModalButtonOptions<T>[];
+    mcGetContainer?: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef) | null;
+    mcAfterOpen?: EventEmitter<void>;
+    mcAfterClose?: EventEmitter<R>;
+    mcCloseByESC?: boolean;
+    mcRestoreFocus?: boolean;
+    mcOkText?: string;
+    mcOkType?: string;
+    mcOkLoading?: boolean;
+    mcOnOk?: EventEmitter<T> | OnClickCallback<T>;
+    mcCancelText?: string;
+    mcCancelLoading?: boolean;
+    mcOnCancel?: EventEmitter<T> | OnClickCallback<T>;
+}
+export interface IModalOptionsForService<T = any> extends IModalOptions<T> {
+    mcOnOk?: OnClickCallback<T>;
+    mcOnCancel?: OnClickCallback<T>;
+}
+export interface IModalButtonOptions<T = any> {
+    label: string;
+    type?: string;
+    shape?: string;
+    ghost?: boolean;
+    size?: string;
+    autoLoading?: boolean;
+    show?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    loading?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    disabled?: boolean | ((this: IModalButtonOptions<T>, contentComponentInstance?: T) => boolean);
+    autoFocus?: boolean;
+    mcModalMainAction?: boolean;
+    onClick?(this: IModalButtonOptions<T>, contentComponentInstance?: T): (void | {}) | Promise<(void | {})>;
+}

package/modal/public-api.d.ts

@@ -0,0 +1,6 @@
+export { KbqModalComponent } from './modal.component';
+export { KbqModalRef } from './modal-ref.class';
+export { KbqModalModule } from './modal.module';
+export { KbqModalService } from './modal.service';
+export * from './modal.directive';
+export * from './modal.type';

package/navbar/README.md

@@ -0,0 +1,41 @@
+# Navbar component
+
+## Objectives
+
+-   create the navbar component
+-   create child components to get them included into it
+
+## Allowed child components
+
+We strongly recommend adhere to use our child components until it is possible but you are free to insert there what you want.
+
+ - left\right side container **kbq-navbar-section**
+   - product\company title **kbq-navbar-brand**
+   - logo container **kbq-navbar-logo**
+     - any markup
+       - **kbq-navbar-title** (please see below)
+	 - title **kbq-navbar-title**
+	   - any markup, only font size, font color, font family is gonna be styled
+	- menu item container **kbq-navbar-item**
+	  - icon **[kbq-icon]** (another PT koobiq component, out of the scope of this)
+	  - title **kbq-navbar-title**
+    - dropdown **[kbq-dropdown]** (another PT koobiq component, out of the scope of this)
+	  - any markup
+	- any markup
+- any markup
+
+## States
+
+We believe you are able to manage navbar child components from outside. Meantime we provide number of kbq-navbar-item states based on css classes which may be combined between each others.
+
+ - kbq-active - selected item
+ - kbq-progress - something in progress (striped animation)
+ - cdk-focused - focused state, we control it as well for common tab order behaviour
+ 
+Disable state also could be combined with other states but it is **disabled** attribute.
+
+## Collapsing
+In the case that absence of space the following elements is collapsed:
+
+-  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). The title attribute is added for [kbq-icon] from kbq-navbar-item text;
+-  kbq-navbar-item is collapsed to [kbq-icon] if exists (if not then the item is not collapsed). 

package/navbar/_navbar-theme.scss

@@ -0,0 +1,123 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/typography/typography-utils' as *;
+
+
+@mixin kbq-navbar-theme($theme) {
+    $background: map.get($theme, background);
+    $primary: map.get($theme, theme);
+
+    $navbar: map.get(map.get($theme, components), navbar);
+    $navbar-item: map.get(map.get($theme, components), navbar-item);
+
+    .kbq-navbar,
+    .kbq-vertical-navbar .kbq-vertical-navbar__container {
+        background-color: map.get($navbar, background);
+    }
+
+    .kbq-navbar-brand.kbq-hovered:not(.kbq-collapsed) {
+        background-color: map.get($navbar-item, state-hover);
+    }
+
+    .kbq-navbar-brand.kbq-vertical.kbq-collapsed {
+        & .kbq-navbar-logo:hover {
+            background-color: map.get($navbar-item, state-hover);
+        }
+    }
+
+    .kbq-navbar-title {
+        color: map.get($navbar-item, color);
+    }
+
+    .kbq-navbar-item,
+    .kbq-navbar-brand,
+    .kbq-navbar-toggle {
+        color: map.get($navbar-item, color);
+
+        & > .kbq-icon {
+            color: map.get($navbar-item, icon-color);
+        }
+
+        & .kbq-navbar-item__arrow-icon {
+            color: map.get($navbar-item, color);
+        }
+
+        &.kbq-active {
+            background: map.get($navbar-item, state-selected);
+        }
+
+        &:hover:not(.kbq-navbar-item_button) {
+            cursor: pointer;
+
+            & .kbq-navbar-item__overlay {
+                background-color: map.get($navbar-item, state-hover);
+            }
+        }
+
+        &:active:not(.kbq-navbar-item_button) {
+            & .kbq-navbar-item__overlay {
+                background: map.get($navbar-item, state-active);
+            }
+        }
+
+        &[disabled] {
+            pointer-events: none;
+            cursor: default;
+
+            .kbq-navbar-item__title,
+            .kbq-icon {
+                opacity: map.get($navbar-item, state-disabled-opacity);
+            }
+        }
+    }
+
+    .kbq-navbar-focusable-item {
+        outline: none;
+
+        /* stylelint-disable no-descending-specificity */
+        &.cdk-keyboard-focused .kbq-navbar-item__overlay {
+            box-shadow:
+                inset 0 0 0 2px map.get(map.get($theme, states), focused-color),
+                inset 0 0 0 3px map.get($background, background);
+        }
+        /* stylelint-enable no-descending-specificity */
+    }
+
+    .kbq-navbar-divider {
+        background-color: map.get($navbar, divider-background);
+    }
+}
+
+button {
+    &.kbq-navbar-item,
+    &.kbq-navbar-brand,
+    &.kbq-navbar-toggle {
+        background: transparent;
+        border: none;
+    }
+}
+
+@mixin kbq-navbar-typography($config) {
+    $tokens: map.get($config, tokens);
+
+    .kbq-navbar-title {
+        @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-font-title));
+    }
+
+    .kbq-navbar-subtitle {
+        @include kbq-typography-level-to-styles($config, extra-small-text);
+    }
+
+    .kbq-navbar-brand {
+        .kbq-navbar-title {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, navbar-brand-font-title));
+
+            &.kbq-navbar-title_small {
+                @include kbq-typography-level-to-styles($config, subheading);
+
+                white-space: unset;
+            }
+        }
+    }
+}

package/navbar/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/navbar/navbar-brand.scss

@@ -0,0 +1,70 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-navbar-logo {
+    display: flex;
+}
+
+.kbq-navbar-brand {
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    & .kbq-navbar-title {
+        cursor: pointer;
+    }
+}
+
+a.kbq-navbar-brand {
+    text-decoration: none;
+}
+
+.kbq-navbar-brand.kbq-horizontal {
+    height: var(--kbq-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+
+    padding-right: var(--kbq-navbar-brand-size-margin-right, map.get($tokens, navbar-brand-size-margin-right));
+
+    & .kbq-navbar-title {
+        padding-left: var(--kbq-navbar-brand-size-padding, map.get($tokens, navbar-brand-size-padding));
+        padding-right: 0;
+    }
+}
+
+.kbq-navbar-brand.kbq-vertical {
+    & .kbq-navbar-logo {
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        min-height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+        min-width: var(
+            --kbq-vertical-navbar-size-states-collapsed-width,
+            map.get($tokens, vertical-navbar-size-states-collapsed-width)
+        );
+    }
+
+    & .kbq-navbar-title {
+        display: flex;
+        align-items: center;
+
+        height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+
+        padding-left: 0;
+    }
+
+    &.kbq-expanded {
+        align-items: unset;
+    }
+
+    &.kbq-collapsed {
+        & .kbq-navbar-title {
+            display: none;
+        }
+    }
+}

package/navbar/navbar-divider.scss

@@ -0,0 +1,18 @@
+.kbq-navbar-divider {
+    display: block;
+}
+
+.kbq-navbar-divider.kbq-vertical {
+    height: 1px;
+
+    margin: 8px 12px;
+}
+
+.kbq-navbar-divider.kbq-horizontal {
+    width: 1px;
+
+    height: 28px;
+
+    margin-left: 8px;
+    margin-right: 8px;
+}

package/navbar/navbar-item.component.d.ts

@@ -0,0 +1,167 @@
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { Overlay, ScrollDispatcher } from '@angular/cdk/overlay';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy, TemplateRef, ViewContainerRef } from '@angular/core';
+import { IFocusableOption } from '@koobiq/cdk/a11y';
+import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqIcon } from '@koobiq/components/icon';
+import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import { KbqVerticalNavbar } from './vertical-navbar.component';
+import * as i0 from "@angular/core";
+export interface KbqNavbarFocusableItemEvent {
+    item: KbqNavbarFocusableItem;
+}
+export declare class KbqNavbarLogo {
+    readonly hovered: Subject<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarLogo, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarLogo, "kbq-navbar-logo, [kbq-navbar-logo]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbarBento {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBento, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarBento, "kbq-navbar-item[bento], [kbq-navbar-item][bento]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbarTitle implements AfterViewInit {
+    private elementRef;
+    readonly hovered: Subject<boolean>;
+    outerElementWidth: number;
+    isTextOverflown: boolean;
+    get text(): string;
+    get isOverflown(): boolean;
+    constructor(elementRef: ElementRef);
+    getOuterElementWidth(): number;
+    checkTextOverflown(): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarTitle, "kbq-navbar-title, [kbq-navbar-title]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbarSubTitle implements AfterContentInit {
+    private elementRef;
+    readonly hovered: Subject<boolean>;
+    outerElementWidth: number;
+    get text(): string;
+    get isOverflown(): boolean;
+    constructor(elementRef: ElementRef);
+    getOuterElementWidth(): number;
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarSubTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarSubTitle, "kbq-navbar-subtitle, [kbq-navbar-subtitle]", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbarBrand implements AfterContentInit, OnDestroy {
+    private navbar;
+    logo: KbqNavbarLogo;
+    title: KbqNavbarTitle;
+    hovered: boolean;
+    get hasBento(): boolean;
+    private destroyed;
+    constructor(navbar: KbqVerticalNavbar);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarBrand, [{ optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarBrand, "kbq-navbar-brand, [kbq-navbar-brand]", ["mcNavbarBrand"], {}, {}, ["logo", "title"], ["*"], false, never>;
+}
+export declare class KbqNavbarDivider {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarDivider, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarDivider, "kbq-navbar-divider", never, {}, {}, never, never, false, never>;
+}
+export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterContentInit, OnDestroy {
+    private elementRef;
+    private changeDetector;
+    private focusMonitor;
+    private ngZone;
+    title: KbqNavbarTitle;
+    button: KbqButton;
+    get tooltip(): KbqTooltipTrigger;
+    private _tooltip;
+    readonly onFocus: Subject<KbqNavbarFocusableItemEvent>;
+    readonly onBlur: Subject<KbqNavbarFocusableItemEvent>;
+    get hasFocus(): boolean;
+    set hasFocus(value: boolean);
+    private _hasFocus;
+    get disabled(): any;
+    set disabled(value: any);
+    private _disabled;
+    get tabIndex(): number;
+    constructor(elementRef: ElementRef<HTMLElement>, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor, ngZone: NgZone);
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    setTooltip(value: KbqTooltipTrigger): void;
+    onFocusHandler(): void;
+    focus(origin?: FocusOrigin): void;
+    blur(): void;
+    getLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarFocusableItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button"], never, false, never>;
+}
+export declare class KbqNavbarRectangleElement {
+    elementRef: ElementRef;
+    readonly state: Subject<void>;
+    get horizontal(): boolean;
+    set horizontal(value: boolean);
+    private _horizontal;
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    private _vertical;
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    private _collapsed;
+    button: KbqButtonCssStyler;
+    constructor(elementRef: ElementRef);
+    getOuterElementWidth(): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarRectangleElement, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarRectangleElement, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", never, {}, {}, ["button"], never, false, never>;
+}
+export declare class KbqNavbarItem extends KbqTooltipTrigger {
+    rectangleElement: KbqNavbarRectangleElement;
+    navbarFocusableItem: KbqNavbarFocusableItem;
+    private changeDetectorRef;
+    private dropdownTrigger;
+    private bento;
+    title: KbqNavbarTitle;
+    subTitle: KbqNavbarSubTitle;
+    icon: KbqIcon;
+    collapsedText: string;
+    get trigger(): string;
+    set trigger(value: string);
+    get collapsed(): boolean;
+    set collapsed(value: boolean);
+    private _collapsed;
+    get croppedText(): string;
+    get collapsable(): boolean;
+    set collapsable(value: boolean);
+    private _collapsable;
+    get titleText(): string | null;
+    get subTitleText(): string | null;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get hasDropDownTrigger(): boolean;
+    get showVerticalDropDownAngle(): boolean;
+    get showHorizontalDropDownAngle(): boolean;
+    get hasCroppedText(): boolean;
+    constructor(rectangleElement: KbqNavbarRectangleElement, navbarFocusableItem: KbqNavbarFocusableItem, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, dropdownTrigger: KbqDropdownTrigger, bento: KbqNavbarBento);
+    ngAfterContentInit(): void;
+    updateTooltip(): void;
+    getTitleWidth(): number;
+    onKeyDown($event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarItem, [null, null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarItem, "kbq-navbar-item, [kbq-navbar-item]", ["mcNavbarItem"], { "collapsedText": { "alias": "collapsedText"; "required": false; }; "trigger": { "alias": "mcTrigger"; "required": false; }; "collapsed": { "alias": "collapsed"; "required": false; }; "collapsable": { "alias": "collapsable"; "required": false; }; }, {}, ["title", "subTitle", "icon"], ["[kbq-icon]", "kbq-navbar-title, [kbq-navbar-title]", "kbq-navbar-subtitle, [kbq-navbar-subtitle]", "*"], false, never>;
+}
+export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDestroy {
+    navbar: KbqVerticalNavbar;
+    private changeDetectorRef;
+    private document;
+    customIcon: KbqIcon;
+    get content(): string | TemplateRef<any>;
+    set content(content: string | TemplateRef<any>);
+    get disabled(): boolean;
+    protected modifier: TooltipModifier;
+    constructor(navbar: KbqVerticalNavbar, changeDetectorRef: ChangeDetectorRef, overlay: Overlay, elementRef: ElementRef, ngZone: NgZone, scrollDispatcher: ScrollDispatcher, hostView: ViewContainerRef, scrollStrategy: any, direction: Directionality, document: any);
+    onKeydown($event: KeyboardEvent): void;
+    ngOnDestroy(): void;
+    toggle: () => void;
+    private getWindow;
+    private windowToggleHandler;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "mcCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
+}

package/navbar/navbar-item.scss

@@ -0,0 +1,159 @@
+@use 'sass:meta';
+@use 'sass:map';
+
+@use '../core/styles/tokens';
+
+
+$tokens: meta.module-variables(tokens) !default;
+
+.kbq-navbar-title,
+.kbq-navbar-subtitle {
+    display: inline-block;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.kbq-navbar-item {
+    box-sizing: border-box;
+
+    position: relative;
+
+    display: flex;
+    align-items: center;
+
+    padding-left: var(--kbq-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+    padding-right: var(--kbq-navbar-item-size-padding, map.get($tokens, navbar-item-size-padding));
+
+    .kbq-badge {
+        position: absolute;
+    }
+}
+
+.kbq-navbar-item__title {
+    display: flex;
+
+    flex-direction: column;
+
+    align-self: center;
+
+    min-width: 0;
+}
+
+.kbq-navbar-item__container {
+    display: flex;
+    flex-direction: row;
+
+    flex: 1 1 auto;
+    justify-content: space-between;
+
+    min-width: 0;
+
+    & .kbq-icon {
+        align-self: center;
+    }
+}
+
+.kbq-navbar-item.kbq-horizontal {
+    height: var(--kbq-navbar-item-size-height, map.get($tokens, navbar-item-size-height));
+
+    & .kbq-icon {
+        min-width: 16px;
+        min-height: 16px;
+    }
+
+    & .kbq-navbar-item__title + .kbq-icon {
+        margin-left: var(--kbq-navbar-size-right-icon-margin, map.get($tokens, navbar-size-right-icon-margin))
+    }
+
+    & .kbq-icon + .kbq-navbar-item__container {
+        margin-left: var(--kbq-navbar-size-icon-margin, map.get($tokens, navbar-size-icon-margin))
+    }
+
+    &.kbq-navbar-item_collapsed .kbq-navbar-item__container {
+        display: none;
+    }
+
+    .kbq-badge {
+        top: 8px;
+        right: 8px;
+    }
+}
+
+.kbq-navbar-item.kbq-vertical {
+    height: var(--kbq-navbar-item-size-height-vertical, map.get($tokens, navbar-item-size-height-vertical));
+
+    /* stylelint-disable no-descending-specificity */
+    & > .kbq-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        min-width: 24px;
+        min-height: 24px;
+    }
+
+    & .kbq-navbar-item__title,
+    & .kbq-icon + .kbq-navbar-item__title,
+    & .kbq-navbar-item__title + .kbq-icon {
+        padding-left: var(--kbq-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
+    }
+
+    &.kbq-navbar-item_button {
+        padding-left: 12px;
+        padding-right: 12px;
+    }
+
+    &.kbq-expanded {
+        & .kbq-badge {
+            top: 16px;
+            right: 16px;
+        }
+    }
+
+    &.kbq-collapsed {
+        & .kbq-badge {
+            top: 4px;
+            right: 4px;
+        }
+
+        & .kbq-navbar-item__title {
+            display: none;
+        }
+    }
+}
+
+.kbq-navbar-item.kbq-navbar-item_button .kbq-button {
+    flex: 1;
+
+    & .kbq-button-wrapper {
+        justify-content: center;
+
+        & .kbq-icon.kbq-icon_left {
+            margin-left: unset;
+        }
+
+        & .kbq-icon.kbq-icon_right {
+            margin-right: unset;
+        }
+    }
+}
+
+a.kbq-navbar-item,
+a.kbq-navbar-title {
+    text-decoration: none;
+}
+
+.kbq-navbar-item,
+.kbq-navbar-brand,
+.kbq-navbar-toggle {
+    & .kbq-navbar-item__overlay {
+        position: absolute;
+        top: 0; right: 0; bottom: 0; left: 0;
+    }
+
+    & [kbq-button] {
+        z-index: 1;
+    }
+}