aril 0.0.3 → 0.0.4

package/theme/styles/layout/menutheme/_transparent.scss

@@ -0,0 +1,26 @@
+.layout-transparent-menu {
+    --logo-color: var(--primary-color);
+    --menu-bg: var(--surface-overlay);
+    --root-menuitem-text-color: var(--primary-color);
+    --menuitem-text-color: var(--text-color);
+    --menuitem-icon-color: var(--primary-color);
+    --menuitem-hover-bg-color: var(--surface-hover);
+    --popup-submenu-item-text-color: var(--text-color);
+    --popup-submenu-item-icon-color: var(--primary-color);
+    --popup-submenu-item-hover-bg-color: var(--surface-hover);
+}
+
+@media screen and (min-width: $breakpoint) {
+    .layout-container.layout-transparent-menu {
+        &.layout-static,
+        &.layout-slim,
+        &.layout-slim-plus,
+        &.layout-horizontal {
+            .layout-sidebar {
+                background-color: transparent;
+                border-right: 1px solid transparent;
+                box-shadow: none;
+            }
+        }
+    }
+}

package/theme/styles/layout/preloading.scss

@@ -0,0 +1,84 @@
+.layout-preloader-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    width: 100vw;
+    background-color: #111417;
+
+    .layout-preloader {
+        position: relative;
+        width: 75px;
+        height: 75px;
+        background: transparent;
+        border: 3px solid #161a1f;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 150px;
+        font-family: sans-serif;
+        font-size: 20px;
+        color: #6366F1;
+        letter-spacing: 4px;
+        text-transform: uppercase;
+        text-shadow: 0 0 10px #6366F1;
+        box-shadow: 0 0 20px rgba(0, 0, 0, .5);
+    
+        &:before {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            width: 100%;
+            height: 100%;
+            border: 3px solid transparent;
+            border-top: 3px solid #6366F1;
+            border-right: 3px solid #6366F1;
+            border-radius: 50%;
+            animation: preloader-rotate-c 1s linear infinite;
+        }
+    
+        span {
+            display: block;
+            position: absolute;
+            top: calc(50% - 2px);
+            left: 50%;
+            width: 50%;
+            height: 4px;
+            background: transparent;
+            transform-origin: left;
+            animation: preloader-rotate 1s linear infinite;
+        }
+    
+        span:before {
+            content: '';
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            border-radius: 50%;
+            background: #6366F1;
+            top: -6px;
+            right: -8px;
+            box-shadow: 0 0 20px #6366F1;
+        }
+    }
+}
+
+@keyframes preloader-rotate-c {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes preloader-rotate {
+    0% {
+        transform: rotate(45deg);
+    }
+
+    100% {
+        transform: rotate(405deg);
+    }
+}

package/theme/styles/theme/base/_colors.scss

@@ -0,0 +1,18 @@
+:root {
+  @if variable-exists(colors) {
+    @each $name, $color in $colors {
+        @for $i from 0 through 5 {
+            @if ($i == 0) {
+                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+            }
+            @else {
+                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
+            }
+        }
+
+        @for $i from 1 through 4 {
+            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+        }
+    }
+  }
+}

package/theme/styles/theme/base/_common.scss

@@ -0,0 +1,75 @@
+* {
+	box-sizing: border-box;
+}
+
+.p-component {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    font-weight: $fontWeight;
+}
+
+.p-component-overlay {
+    background-color: $maskBg;
+    transition-duration: $transitionDuration;
+}
+
+.p-disabled, .p-component:disabled {
+    opacity: $disabledOpacity;
+}
+
+.p-error {
+    color: $errorColor;
+}
+
+.p-text-secondary {
+    color: $textSecondaryColor;
+}
+
+.pi {
+    font-size: $primeIconFontSize;
+}
+
+.p-icon {
+    width: $primeIconFontSize;
+    height: $primeIconFontSize;
+}
+
+.p-link {
+    font-family: var(--font-family);
+    font-feature-settings: var(--font-feature-settings, normal);
+    font-size: $fontSize;
+    border-radius: $borderRadius;
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+.p-component-overlay-enter {
+    animation: p-component-overlay-enter-animation 150ms forwards;
+}
+
+.p-component-overlay-leave {
+    animation: p-component-overlay-leave-animation 150ms forwards;
+}
+
+.p-component-overlay {
+    @keyframes p-component-overlay-enter-animation {
+        from {
+            background-color: transparent;
+        }
+        to {
+            background-color: var(--maskbg);
+        }
+    }
+
+    @keyframes p-component-overlay-leave-animation {
+        from {
+            background-color: var(--maskbg);
+        }
+        to {
+            background-color: transparent;
+        }
+    }
+}

package/theme/styles/theme/base/_components.scss

@@ -0,0 +1,106 @@
+@import '_mixins';
+@import '_colors';
+
+@import './components/input/_editor';
+
+@layer primeng {
+    @import '_common';
+
+    //Input
+    @import './components/input/_autocomplete';
+    @import './components/input/_calendar';
+    @import './components/input/_cascadeselect';
+    @import './components/input/_checkbox';
+    @import './components/input/_chips';
+    @import './components/input/_colorpicker';
+    @import './components/input/_dropdown';
+
+    @import './components/input/_inputgroup';
+    @import './components/input/_inputmask';
+    @import './components/input/_inputnumber';
+    @import './components/input/_inputswitch';
+    @import './components/input/_inputtext';
+    @import './components/input/_listbox';
+    @import './components/input/_multiselect';
+    @import './components/input/_password';
+    @import './components/input/_radiobutton';
+    @import './components/input/_rating';
+    @import './components/input/_selectbutton';
+    @import './components/input/_slider';
+    @import './components/input/_togglebutton';
+    @import './components/input/_treeselect';
+    
+    //Button
+    @import './components/button/_button';
+    @import './components/button/_speeddial';
+    @import './components/button/_splitbutton';
+    
+    //Data
+    @import './components/data/_carousel';
+    @import './components/data/_datatable';
+    @import './components/data/_dataview';
+    @import './components/data/_filter';
+    @import './components/data/_orderlist';
+    @import './components/data/_organizationchart';
+    @import './components/data/_paginator';
+    @import './components/data/_picklist';
+    @import './components/data/_timeline';
+    @import './components/data/_tree';
+    @import './components/data/_treetable';
+    @import './components/data/_virtualscroller';
+    
+    //Panel
+    @import './components/panel/_accordion';
+    @import './components/panel/_card';
+    @import './components/panel/_divider';
+    @import './components/panel/_fieldset';
+    @import './components/panel/_panel';
+    @import './components/panel/_scrollpanel';
+    @import './components/panel/_splitter';
+    @import './components/panel/_tabview';
+    @import './components/panel/_toolbar';
+    
+    //Overlay
+    @import './components/overlay/_confirmpopup';
+    @import './components/overlay/_dialog';
+    @import './components/overlay/_overlaypanel';
+    @import './components/overlay/_sidebar';
+    @import './components/overlay/_tooltip';
+    
+    //File
+    @import './components/file/_fileupload';
+    
+    //Menu
+    @import './components/menu/_breadcrumb';
+    @import './components/menu/_contextmenu';
+    @import './components/menu/_dock';
+    @import './components/menu/_megamenu';
+    @import './components/menu/_menu';
+    @import './components/menu/_menubar';
+    @import './components/menu/_panelmenu';
+    @import './components/menu/_slidemenu';
+    @import './components/menu/_steps';
+    @import './components/menu/_tabmenu';
+    @import './components/menu/_tieredmenu';
+    
+    //Messages
+    @import './components/messages/_inlinemessage';
+    @import './components/messages/_message';
+    @import 'components/messages/toast';
+    
+    //MultiMedia
+    @import './components/multimedia/_galleria';
+    @import './components/multimedia/_image';
+    
+    //Misc
+    @import './components/misc/_avatar';
+    @import './components/misc/_badge';
+    @import './components/misc/_blockui';
+    @import './components/misc/_chip';
+    @import './components/misc/_inplace';
+    @import './components/misc/_progressbar';
+    @import './components/misc/_scrolltop';
+    @import './components/misc/_skeleton';
+    @import './components/misc/_tag';
+    @import './components/misc/_terminal';
+}

package/theme/styles/theme/base/_mixins.scss

@@ -0,0 +1,337 @@
+@mixin icon-override($icon) {
+    &:before {
+        content: $icon;
+    }
+}
+
+@mixin focused() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $focusShadow;
+}
+
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin focused-input() {
+    @include focused();
+    border-color: $inputFocusBorderColor;
+}
+
+@mixin focused-listitem() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: $inputListItemFocusShadow;
+}
+
+@mixin invalid-input() {
+    border-color: $inputErrorBorderColor;
+}
+
+@mixin menuitem-link {
+    padding: $menuitemPadding;
+    color: $menuitemTextColor;
+    border-radius: $menuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+    .p-menuitem-text {
+        color: $menuitemTextColor;
+    }
+
+    .p-menuitem-icon {
+        color: $menuitemIconColor;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-submenu-icon {
+        color: $menuitemIconColor;
+    }
+
+    &:not(.p-disabled):hover {
+        background: $menuitemHoverBg;
+
+        .p-menuitem-text {
+            color: $menuitemTextHoverColor;
+        }
+
+        .p-menuitem-icon {
+            color: $menuitemIconHoverColor;
+        }
+
+        .p-submenu-icon {
+            color: $menuitemIconHoverColor;
+        }
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin menuitem {
+    > .p-menuitem-content {
+        color: $menuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $menuitemBorderRadius;
+
+        .p-menuitem-link {
+            color: $menuitemTextColor;
+            padding: $menuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $menuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $menuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $menuitemIconColor;
+            }
+        }
+    }
+
+    &.p-highlight {
+        > .p-menuitem-content {
+            color: $menuitemTextActiveColor;
+            background: $menuitemActiveBg;
+
+            .p-menuitem-link {
+                .p-menuitem-text {
+                    color: $menuitemTextActiveColor;
+                }
+
+                .p-menuitem-icon,
+                .p-submenu-icon {
+                    color: $menuitemIconActiveColor;
+                }
+            }
+        }
+
+        &.p-focus {
+            > .p-menuitem-content {
+                background: $menuitemActiveFocusBg;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        &.p-focus {
+            > .p-menuitem-content {
+                color: $menuitemTextFocusColor;
+                background: $menuitemFocusBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextFocusColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconFocusColor;
+                    }
+                }
+            }
+        }
+
+        > .p-menuitem-content {
+            &:hover {
+                color: $menuitemTextHoverColor;
+                background: $menuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $menuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $menuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin horizontal-rootmenuitem-link {
+    padding: $horizontalMenuRootMenuitemPadding;
+    color: $horizontalMenuRootMenuitemTextColor;
+    border-radius: $horizontalMenuRootMenuitemBorderRadius;
+    transition: $listItemTransition;
+    user-select: none;
+
+    .p-menuitem-text {
+        color: $horizontalMenuRootMenuitemTextColor;
+    }
+
+    .p-menuitem-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-right: $inlineSpacing;
+    }
+
+    .p-submenu-icon {
+        color: $horizontalMenuRootMenuitemIconColor;
+        margin-left: $inlineSpacing;
+    }
+
+    &:not(.p-disabled):hover {
+        background: $horizontalMenuRootMenuitemHoverBg;
+
+        .p-menuitem-text {
+            color: $horizontalMenuRootMenuitemTextHoverColor;
+        }
+
+        .p-menuitem-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+
+        .p-submenu-icon {
+            color: $horizontalMenuRootMenuitemIconHoverColor;
+        }
+    }
+
+    &:focus {
+        @include focused-listitem();
+    }
+}
+
+@mixin horizontal-rootmenuitem {
+    > .p-menuitem-content {
+        color: $horizontalMenuRootMenuitemTextColor;
+        transition: $listItemTransition;
+        border-radius: $horizontalMenuRootMenuitemBorderRadius;
+
+        .p-menuitem-link {
+            padding: $horizontalMenuRootMenuitemPadding;
+            user-select: none;
+
+            .p-menuitem-text {
+                color: $horizontalMenuRootMenuitemTextColor;
+            }
+
+            .p-menuitem-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-right: $inlineSpacing;
+            }
+
+            .p-submenu-icon {
+                color: $horizontalMenuRootMenuitemIconColor;
+                margin-left: $inlineSpacing;
+            }
+        }
+    }
+
+    &:not(.p-highlight):not(.p-disabled) {
+        > .p-menuitem-content {
+            &:hover {
+                color: $horizontalMenuRootMenuitemTextHoverColor;
+                background: $horizontalMenuRootMenuitemHoverBg;
+
+                .p-menuitem-link {
+                    .p-menuitem-text {
+                        color: $horizontalMenuRootMenuitemTextHoverColor;
+                    }
+
+                    .p-menuitem-icon,
+                    .p-submenu-icon {
+                        color: $horizontalMenuRootMenuitemIconHoverColor;
+                    }
+                }
+            }
+        }
+    }
+}
+
+@mixin placeholder {
+    ::-webkit-input-placeholder {
+        @content;
+    }
+    :-moz-placeholder {
+        @content;
+    }
+    ::-moz-placeholder {
+        @content;
+    }
+    :-ms-input-placeholder {
+        @content;
+    }
+}
+
+@mixin scaledPadding($val, $scale) {
+    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
+}
+
+@mixin scaledFontSize($val, $scale) {
+    font-size: $val * $scale;
+}
+
+@mixin nested-submenu-indents($val, $index, $length) {
+    .p-submenu-list {
+        .p-menuitem {
+            .p-menuitem-content {
+                .p-menuitem-link {
+                    padding-left: $val * ($index + 1);
+                }
+            }
+            @if $index < $length {
+                @include nested-submenu-indents($val, $index + 2, $length);
+            }
+        }
+    }
+}
+
+@mixin action-icon($enabled: true) {
+    width: $actionIconWidth;
+    height: $actionIconHeight;
+    color: $actionIconColor;
+    border: $actionIconBorder;
+    background: $actionIconBg;
+    border-radius: $actionIconBorderRadius;
+    transition: $actionIconTransition;
+
+    &:enabled:hover {
+        color: $actionIconHoverColor;
+        border-color: $actionIconHoverBorderColor;
+        background: $actionIconHoverBg;
+    }
+
+    &:focus-visible {
+        @include focused();
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
+
+@mixin focused-inset() {
+    outline: $focusOutline;
+    outline-offset: $focusOutlineOffset;
+    box-shadow: inset $focusShadow;
+}
+
+@mixin menuitem-badge {
+    background: $badgeBg;
+    color: $badgeTextColor;
+    font-size: $badgeFontSize;
+    font-weight: $badgeFontWeight;
+    min-width: $badgeMinWidth;
+    height: $badgeHeight;
+    line-height: $badgeHeight;
+    border-radius: $borderRadius;
+    margin-left: $inlineSpacing;
+    padding-left: $inlineSpacing;
+    padding-right: $inlineSpacing;
+}