@mediusinc/mng-commons 3.6.0-rc.0 → 3.6.0-rc.2

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

@@ -0,0 +1,106 @@
+@import '_mixins';
+@import '_common';
+@import '_colors';
+
+//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/_editor';
+@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/_fullcalendar';
+//@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/v2/theme/theme-base/_mixins.scss

@@ -0,0 +1,203 @@
+@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 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 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) {
+    ul {
+        li {
+            a {
+                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 {
+        @include focused();
+    }
+}
+
+@function tint($color, $percentage) {
+    @return mix(#fff, $color, $percentage);
+}
+
+@function shade($color, $percentage) {
+    @return mix(#000, $color, $percentage);
+}
+
+@mixin button-states {
+    // <button> and <a> tags support :enabled selector.
+
+    &:enabled,
+    &:not(button):not(a):not(.p-disabled) {
+        @content;
+    }
+}
+
+@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;
+}