@mediusinc/mng-commons-layout 5.0.0-rc.0

package/scss/theme/theme-base/_components.scss

@@ -0,0 +1,110 @@
+@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';
+}
+
+@import 'mng/mng_variables';
+@import 'mng/mng_mixins';
+@import 'mng/mng_theme_styles';

package/scss/theme/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;
+}