@rt-tools/ui-kit 0.0.4

package/src/styles/components/_action-bar.scss

@@ -0,0 +1,84 @@
+@use '../base/mixin' as mixins;
+@use '../base/variables' as vars;
+
+$action-bar: (
+    container: (
+        width: 100%,
+        z-index: 1000,
+        top: auto,
+        bottom: 3.75rem,
+        left: auto,
+        right: auto,
+    ),
+    bar: (
+        width: fit-content,
+        gap: 0.75rem,
+        padding: 0.5rem 1rem,
+        border-radius: 0.5rem,
+        color: var(--clr-white-100),
+        background-color: var(--clr-black-100),
+        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+    ),
+    bar-mobile: (
+        gap: 0.5rem,
+        padding: 0.25rem 0.75rem,
+    ),
+    counter: (
+        font-size: 1rem,
+        font-weight: 600,
+    ),
+    actions: (
+        gap: 0.5rem,
+    ),
+    actions-mobile: (
+        gap: 0.25rem,
+    ),
+    action: (
+        gap: 0.5rem,
+        font-size: 1rem,
+        font-weight: 600,
+        padding: 0.625rem 1rem,
+        border-radius: 0.25rem,
+    ),
+    action-mobile: (
+        gap: 0.25rem,
+        padding: 0.325rem 0.5rem,
+    ),
+    action-hover: (
+        background-color: var(--clr-black-80),
+    ),
+    action-menu: (
+        gap: 0.5rem,
+        padding: 0.5rem,
+        border-radius: 0.5rem,
+        color: var(--clr-black-100),
+        background-color: var(--clr-white-100),
+        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+    ),
+    action-menu-mobile: (
+        gap: 0.25rem,
+        padding: 0.25rem,
+    ),
+    action-menu-action: (
+        gap: 0.5rem,
+        padding: 0.625rem 1rem,
+        font-size: 1rem,
+        font-weight: 600,
+        border-radius: 0.25rem,
+    ),
+    action-menu-action-mobile: (
+        gap: 0.25rem,
+        padding: 0.325rem 0.5rem,
+    ),
+    action-menu-action-hover: (
+        background-color: var(--clr-black-40),
+    ),
+);
+
+:root {
+    @each $element, $elements in $action-bar {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('action-bar', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}

package/src/styles/components/_button.scss

@@ -0,0 +1,364 @@
+@use '../base/mixin' as mixins;
+@use '../base/variables' as vars;
+@use 'sass:color' as color;
+
+$button: (
+    base: (
+        color: var(--clr-black-100),
+        font-family: var(--font-default),
+    ),
+    fab: (
+        color: var(--clr-black-60),
+    ),
+    fab-hover: (
+        color: var(--clr-black-100),
+    ),
+    text-hover: (
+        background: var(--clr-black-15),
+    ),
+    text-focus: (
+        background: var(--clr-black-20),
+    ),
+    text-active: (
+        background: var(--clr-black-30),
+    ),
+    text-base: (
+        color: var(--clr-black-60),
+    ),
+    text-base-hover: (
+        color: var(--clr-black-100),
+    ),
+    text-gray: (
+        color: var(--clr-black-60),
+    ),
+    text-gray-hover: (
+        color: var(--clr-blue-60),
+    ),
+    text-blue: (
+        color: var(--clr-blue-100),
+    ),
+    text-blue-hover: (
+        color: var(--clr-black-100),
+    ),
+    fill-base: (
+        background-color: var(--clr-black-100),
+        color: var(--clr-white-100),
+    ),
+    fill-blue: (
+        background-color: var(--clr-blue-10),
+        color: var(--clr-blue-100),
+    ),
+    fill-gray: (
+        background-color: var(--clr-gray-5),
+        color: var(--clr-black-40),
+    ),
+    fill-black: (
+        background-color: var(--clr-black-100),
+        color: var(--clr-white-100),
+    ),
+    fill-green: (
+        border: 1px solid color.scale(vars.$clr-green-80, $lightness: -10%),
+        color: var(--clr-white-100),
+        background-color: var(--clr-green-80),
+    ),
+    fill-green-hover: (
+        background-color: color.scale(vars.$clr-green-80, $lightness: -10%),
+    ),
+    fill-green-light: (
+        border-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+        color: var(--clr-green-100),
+        background-color: var(--clr-green-10),
+    ),
+    fill-green-light-hover: (
+        background-color: color.scale(vars.$clr-green-10, $lightness: -10%),
+    ),
+    fill-red: (
+        border: 1px solid color.scale(vars.$clr-red-100, $lightness: -10%),
+        color: var(--clr-white-100),
+        background-color: vars.$clr-red-100,
+    ),
+    fill-red-hover: (
+        background-color: color.scale(vars.$clr-red-100, $lightness: -10%),
+    ),
+    fill-red-light: (
+        border-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+        color: var(--clr-red-100),
+        background-color: var(--clr-red-10),
+    ),
+    fill-red-light-hover: (
+        background-color: color.scale(vars.$clr-red-10, $lightness: -10%),
+    ),
+    outline: (
+        border: 1px solid var(--clr-blue-40),
+    ),
+    outline-blue: (
+        color: var(--clr-blue-100),
+    ),
+    outline-base: (
+        color: var(--clr-black-100),
+    ),
+    disabled: (
+        background-color: var(--clr-gray-5),
+        color: var(--clr-black-40),
+    ),
+);
+
+:root {
+    @each $element, $elements in $button {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('button', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}
+
+button {
+    line-height: 1;
+    cursor: pointer;
+}
+
+.c-button {
+    display: inline-flex;
+    align-items: center;
+    font-family: var(--rt-button-base-font-family);
+    line-height: 1;
+    position: relative;
+    justify-content: center;
+    font-size: 1rem;
+    color: var(--rt-button-base-color);
+    transition: all 0.15s linear;
+
+    //FAB
+    &[class*='--fab'] {
+        border: 0;
+        background-color: transparent;
+        color: var(--rt-button-fab-color);
+
+        &:hover {
+            color: var(--rt-button-fab-hover-color);
+
+            svg {
+                g {
+                    fill: var(--rt-button-fab-hover-color);
+                }
+            }
+        }
+    }
+
+    // --fab {color}
+
+    // TEXT
+    &[class*='--txt-'] {
+        border: 0;
+        background-color: transparent;
+        border-radius: 5px;
+
+        &:hover {
+            background: var(--rt-button-text-hover-background);
+        }
+
+        &:focus {
+            background: var(--rt-button-text-focus-background);
+        }
+
+        &:active {
+            background: var(--rt-button-text-active-background);
+        }
+
+        &[class*='base'] {
+            color: var(--rt-button-text-base-color);
+
+            &:hover {
+                color: var(--rt-button-text-base-hover-color);
+
+                svg {
+                    g {
+                        fill: var(--rt-button-text-base-hover-color);
+                    }
+                }
+            }
+        }
+
+        &[class*='gray'] {
+            color: var(--rt-button-text-gray-color);
+
+            &:hover {
+                color: var(--rt-button-text-gray-hover-color);
+
+                svg {
+                    g {
+                        fill: var(--rt-button-text-gray-hover-color);
+                    }
+                }
+            }
+        }
+
+        &[class*='blue'] {
+            color: var(--rt-button-text-blue-color);
+
+            .c-circle {
+                border-color: var(--rt-button-text-blue-color);
+            }
+
+            &:hover {
+                color: var(--rt-button-text-blue-hover-color);
+
+                .c-circle {
+                    border-color: var(--rt-button-text-blue-hover-color);
+                }
+            }
+        }
+    }
+
+    // --txt-{color}
+
+    // COLOR
+    &[class*='--fill-'] {
+        border: 0;
+        border-radius: mixins.rem(6);
+
+        &[class*='base'] {
+            background-color: var(--rt-button-fill-base-background-color);
+            color: var(--rt-button-fill-base-color);
+        }
+
+        &[class*='blue'] {
+            background-color: var(--rt-button-fill-blue-background-color);
+            color: var(--rt-button-fill-blue-color);
+        }
+
+        &[class*='gray'] {
+            background-color: var(--rt-button-fill-gray-background-color);
+            color: var(--rt-button-fill-gray-color);
+        }
+
+        &[class*='black'] {
+            background-color: var(--rt-button-fill-black-background-color);
+            color: var(--rt-button-fill-black-color);
+        }
+
+        &[class*='green'] {
+            border: var(--rt-button-fill-green-border);
+            border-radius: 2px;
+            color: var(--rt-button-fill-green-color);
+            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
+            background-color: var(--rt-button-fill-green-background-color);
+
+            &:hover {
+                background-color: var(--rt-button-fill-green-hover-background-color);
+            }
+
+            &[class*='-light'] {
+                border-color: var(--rt-button-fill-green-light-border-color);
+                color: var(--rt-button-fill-green-light-color);
+                background-color: var(--rt-button-fill-green-light-background-color);
+
+                &:hover {
+                    background-color: var(--rt-button-fill-green-light-hover-background-color);
+                }
+            }
+        }
+
+        &[class*='red'] {
+            border: var(--rt-button-fill-red-border);
+            border-radius: 2px;
+            color: var(--rt-button-fill-red-color);
+            box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
+            background-color: var(--rt-button-fill-red-background-color);
+
+            &:hover {
+                background-color: var(--rt-button-fill-red-hover-background-color);
+            }
+
+            &[class*='-light'] {
+                border-color: var(--rt-button-fill-red-light-border-color);
+                color: var(--rt-button-fill-red-light-color);
+                background-color: var(--rt-button-fill-red-light-background-color);
+
+                &:hover {
+                    background-color: var(--rt-button-fill-red-light-hover-background-color);
+                }
+            }
+        }
+    }
+
+    // --fill-{color}
+
+    // OUTLINE
+    &[class*='--outline-'] {
+        border: var(--rt-button-outline-border);
+        border-radius: mixins.rem(40);
+        background-color: transparent;
+
+        &[class*='blue'] {
+            color: var(--rt-button-outline-blue-color);
+        }
+
+        &[class*='base'] {
+            color: var(--rt-button-outline-base-color);
+        }
+    }
+
+    // --outline-{color}
+
+    // SIZE
+    &[class*='--size'] {
+        &[class*='-sm'] {
+            height: 1.75rem;
+            padding: 0 0.75rem;
+            font-size: mixins.rem(14);
+
+            svg + span {
+                margin-left: 0.75rem;
+            }
+        }
+
+        &[class*='-md'] {
+            height: 2.5rem;
+            padding: 0 1.25rem;
+            font-size: mixins.rem(18);
+
+            svg + span {
+                margin-left: mixins.rem(15);
+            }
+        }
+
+        &[class*='-l'] {
+            height: mixins.rem(60);
+            padding: 0 2.5rem;
+            font-size: mixins.rem(18);
+        }
+    }
+
+    // --size-{size}
+
+    // HEIGHT
+    &[class*='--h-'] {
+        &[class*='40'] {
+            height: 40px;
+            padding: 0 15px;
+        }
+
+        &[class*='30'] {
+            height: 30px;
+            padding: 0 10px;
+        }
+    }
+
+    // --h-{height}
+
+    // SHADOW
+    &[class*='--shadow'] {
+        box-shadow: 0 2px 4px rgba(24, 24, 24, 0.1);
+    }
+
+    // --shadow
+
+    // DISABLED
+    &[class*='--disabled'] {
+        background-color: var(--rt-button-disabled-background-color) !important;
+        color: var(--rt-button-disabled-color) !important;
+        cursor: not-allowed !important;
+    }
+
+    // --disabled
+}

package/src/styles/components/_checkbox.scss

@@ -0,0 +1,40 @@
+@use '../base/mixin' as mixins;
+@use '../base/variables' as vars;
+
+$checkbox: (
+    container: (
+        gap: 0.75rem,
+    ),
+    box: (
+        width: 1rem,
+        height: 1rem,
+        border: 0.125rem solid var(--clr-black-40),
+        border-radius: 0.25rem,
+        background-color: var(--clr-white-100),
+    ),
+    box-active: (
+        color: var(--mat-button-text-label-text-color),
+    ),
+    box-inactive: (
+        color: var(--clr-black-40),
+    ),
+    label: (
+        font-size: 1rem,
+        font-weight: 500,
+        color: var(--clr-black-80),
+    ),
+    description: (
+        margin-top: 0.125rem,
+        font-size: 0.75rem,
+        font-weight: 500,
+        color: var(--clr-black-40),
+    ),
+);
+
+:root {
+    @each $element, $elements in $checkbox {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('checkbox', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}

package/src/styles/components/_dynamic-selectors.scss

@@ -0,0 +1,134 @@
+@use '../base/mixin' as mixins;
+
+$dynamic-selector: (
+    item: (
+        height: 3rem,
+        background-color: var(--mat-option-selected-state-layer-color),
+        border-radius: 0.3125rem,
+        margin-bottom: 0.5rem,
+        padding: 0 0.25rem 0 1rem,
+    ),
+    item-draggable: (
+        padding: 0 0.25rem 0 0.25rem,
+    ),
+    item-mover: (
+        padding: 0 0.25rem 0 0,
+        border-right: 1px solid var(--clr-black-30),
+        margin-right: 0.75rem,
+    ),
+    item-control: (
+        padding: 0 0.25rem 0 0.25rem,
+        border-right: 1px solid var(--clr-black-30),
+        gap: 0.5rem,
+    ),
+    item-control-last-child: (
+        padding: 0 0 0 0.25rem,
+        border-right: none,
+    ),
+    item-control-button-active: (
+        color: var(--clr-red-100),
+    ),
+    item-control-icon: (
+        size: 1.125rem,
+    ),
+    item-drag-preview: (
+        box-shadow: 0 0.5rem 1rem 0 var(--clr-black-60),
+    ),
+);
+
+:root {
+    @each $element, $elements in $dynamic-selector {
+        @each $style-token, $value in $elements {
+            #{mixins.generateCssVar('dynamic-selector', #{$element}, #{$style-token})}: #{$value};
+        }
+    }
+}
+
+.rtui-dynamic-selector {
+    &__item {
+        height: var(--rt-dynamic-selector-item-height);
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+
+        background-color: var(--rt-dynamic-selector-item-background-color);
+        border-radius: var(--rt-dynamic-selector-item-border-radius);
+        margin-bottom: var(--rt-dynamic-selector-item-margin-bottom);
+        padding: var(--rt-dynamic-selector-item-padding);
+
+        &::-webkit-scrollbar {
+            display: none;
+        }
+
+        &--draggable {
+            padding: var(--rt-dynamic-selector-item-draggable-padding);
+        }
+
+        &-mover {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding: var(--rt-dynamic-selector-item-mover-padding);
+            border-right: var(--rt-dynamic-selector-item-mover-border-right);
+            margin-right: var(--rt-dynamic-selector-item-mover-margin-right);
+        }
+
+        &-title {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &-input {
+            width: 100%;
+            height: 100%;
+        }
+
+        &-controls {
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+        }
+
+        &-control {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: var(--rt-dynamic-selector-item-control-gap);
+            padding: var(--rt-dynamic-selector-item-control-padding);
+            border-right: var(--rt-dynamic-selector-item-control-border-right);
+
+            &:last-child {
+                padding: var(--rt-dynamic-selector-item-control-last-child-padding);
+                border-right: var(--rt-dynamic-selector-item-control-last-child-border-right);
+            }
+
+            &-button {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+
+                .mat-icon {
+                    width: var(--rt-dynamic-selector-item-control-icon-size);
+                    height: var(--rt-dynamic-selector-item-control-icon-size);
+                    font-size: var(--rt-dynamic-selector-item-control-icon-size);
+                }
+
+                &--active {
+                    .mat-icon {
+                        color: var(--rt-dynamic-selector-item-control-button-active-color);
+                    }
+                }
+
+                &--draggable {
+                    cursor: move;
+                }
+            }
+        }
+    }
+
+    &__actions {
+        display: flex;
+        align-items: center;
+    }
+}

package/src/styles/components/_form.scss

@@ -0,0 +1,90 @@
+@use '../base/mixin' as mixins;
+@use '../base/variables' as vars;
+
+// FORM
+.c-form {
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex: 1 1 100%;
+
+    &__title {
+        font-size: 1.5rem;
+        line-height: 1.1;
+        font-weight: 600;
+    }
+
+    &__title-descr {
+        margin-top: 0.75rem;
+        font-size: 1rem;
+        color: var(--clr-black-60);
+    }
+
+    &__item {
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    * + &__item {
+        margin-top: 2rem;
+    }
+
+    &__controls {
+        position: relative;
+        width: 100%;
+
+        display: flex;
+        flex-direction: column;
+
+        margin-top: 2rem;
+    }
+
+    &__control-item {
+        width: 100%;
+
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+
+        & > mat-form-field {
+            width: 100%;
+        }
+
+        &--align {
+            &--center {
+                justify-content: center;
+            }
+        }
+    }
+
+    &__control-item + &__control-item {
+        margin-top: 0.75rem;
+    }
+
+    &__control-sub-item {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+    }
+
+    &__control-sub-item + &__control-sub-item {
+        margin-left: 2rem;
+    }
+
+    @include mixins.media-breakpoint-down(vars.$device-xs) {
+        * + &__item {
+            margin-top: 1rem;
+        }
+
+        &__controls {
+            margin-top: 1rem;
+        }
+    }
+} // c-form