@annuadvent/ngx-common-ui:

The ngx-common-ui angular components library focuses on providing a collection of common UI components that can be utilized across different Angular projects. It includes a wide range of UI elements such as buttons, forms, modals, alerts, navigation menus, and more. These components are built with flexibility and customization in mind, allowing developers to easily adapt them to suit their application's specific design requirements.

ngx-common-ui Documentation

ngx-common-ui Github

ngx-common-ui NPM

Workspace repository

• To contribute code with ngx-common-ui library, it is recommended to work through ngx-workspace project, that integrates all libraries and provides all required scripts to build, deploy and test them.
• ngx-workspace Github

CSS THEME CLASSES TO BE USED WITH NGX-COMMON-UI LIBRARY

Following is a list of all available CSS classes available for theming your website.

LAYOUT

• .relative - Relative

• .flex-container - Full width container with all its children of max width --anu-site-width

• .container - Full width container

• .container-fluid - Auto width container

• .row - Row

• .row-lg - Row applicable for large screen

• .row-md - Row applicable for medium screen

• .row-sm - Row applicable for small screen

• .row.left - left align row content

• .row.right - right align row content

• .row.top - top align row content

• .row.bottom - bottom align row content

• .col - Column

• .col-lg - Column applicable to large screen only

• .col-md - Column applicable to medium screen only

• .col-sm - Column applicable to small screen only

BORDERS

General border

• .border - normal border, 1px
• .border-thick - thick border, 2px
• .border-thicker - thicker border, 3px
• .border-thickest - thickest border, 5px
• .border-round - round border
• .border-round-half - round border 1/2 round corners than normal
• .border-round-double - round border 2x round corners than normal
• .border-primary - primary colored border
• .border-secondary - secondary colored border

Primary Theme border

• .primary-normal-border - theme colored border
• .primary-light-border - theme colored border
• .primary-lighter-border - theme colored border
• .primary-lightest-border - theme colored border
• .primary-deep-light-border - theme colored border
• .primary-dark-border - theme colored border
• .primary-darker-border - theme colored border
• .primary-darkest-border - theme colored border
• .primary-deep-dark-border - theme colored border

Secondary Theme border

• .secondary-normal-border - theme colored border
• .secondary-light-border - theme colored border
• .secondary-lighter-border - theme colored border
• .secondary-lightest-border - theme colored border
• .secondary-deep-light-border - theme colored border
• .secondary-dark-border - theme colored border
• .secondary-darker-border - theme colored border
• .secondary-darkest-border - theme colored border
• .secondary-deep-dark-border - theme colored border

Accent Theme border

• .accent-normal-border - theme colored border
• .accent-light-border - theme colored border
• .accent-lighter-border - theme colored border
• .accent-lightest-border - theme colored border
• .accent-deep-light-border - theme colored border
• .accent-dark-border - theme colored border
• .accent-darker-border - theme colored border
• .accent-darkest-border - theme colored border
• .accent-deep-dark-border - theme colored border

OVERFLOW CONTENT

• .overflow-hidden - Overflow is hidden at both x and y axis
• .overflow-auto - Overflow is auto flow at both x and y axis
• .overflow-x-hidden - Overflow is hidden at X axis only
• .overflow-x-auto - Overflow is auto flow at X axis only
• .overflow-y-hidden - Overflow is hidden at Y axis only
• .overflow-y-auto - Overflow is auto flow at Y axis only

BUTTONS

• .btn - Button class
• .btn.secondary - secondary button
• .btn.success - success button
• .btn.warning - warning button
• .btn.error - error button
• .btn.disabled - disabled button

NOTIFICATION COLOR CLASSES

• .error - Error
• .warning - Warning
• .success - Success

ALIGNMENT

Content Alignment

• .left - left align content
• .right - right align content
• .top - top align content
• .bottom - bottom align content
• .middle - middle align content
• .stretch - stretch align content
• .stretch-lg - stretch align content - applicable to large screen only
• .stretch-md - stretch align content - applicable to medium screen only
• .stretch-sm - stretch align content - applicable to small screen only
• .nowrap - nowrapable content
• .nowrap-lg - nowrapable content - applicable to large screen only
• .nowrap-md - nowrapable content - applicable to medium screen only
• .nowrap-sm - nowrapable content - applicable to small screen only

Text Alignment

• .text-left - left align text

• .text-left-lg - left align text, applicable to large screen only

• .text-left-md - left align text, applicable to medium screen only

• .text-left-sm - left align text, applicable to small screen only

• .text-right - right align text

• .text-right-lg - right align text, applicable to large screen only

• .text-right-md - right align text, applicable to medium screen only

• .text-right-sm - right align text, applicable to small screen only

• .text-center - center align text

• .text-center-lg - center align text, applicable to large screen only

• .text-center-md - center align text, applicable to medium screen only

• .text-center-sm - center align text, applicable to small screen only

• .text-justify - justify align text

• .text-justify-lg - justify align text, applicable to large screen only

• .text-justify-md - justify align text, applicable to medium screen only

• .text-justify-sm - justify align text, applicable to small screen only

VISIBILITY

• .hidden - hide content
• .hidden-lg - hide content - applicable to large screen only
• .hidden-md - hide content - applicable to medium screen only
• .hidden-sm - hide content - applicable to small screen only

UTILITIES

Popup

• .popup - makes an element a popup, and keeps it hidden
• .popup.opened - shows a popup

Shadow

• .shadow - gives a shadow to element
• .shadow-half - gives a smaller shadow to element
• .shadow-double - gives a double size shadow to element

Disable text selection

• .disable-select - disables the text selection inside the element

Code Formatting

• .code - formats the content as code

SPACING

Inner Spacing(padding) - all sides

• .spacing - normal spacing
• .spacing-half - half spacing
• .spacing-lg - normal spacing applicable to large screen only
• .spacing-md - normal spacing applicable to medium screen only
• .spacing-sm - normal spacing applicable to small screen only

Inner Spacing(padding) - horizontal only

• .spacing-h - horizontal only, normal spacing
• .spacing-h-half - horizontal only, half spacing
• .spacing-h-lg - horizontal only, normal spacing applicable to large screen only
• .spacing-h-md - horizontal only, normal spacing applicable to medium screen only
• .spacing-h-sm - horizontal only, normal spacing applicable to small screen only

Inner Spacing(padding) - vertical only

• .spacing-v - vertical only, normal spacing
• .spacing-v-half - vertical only, half spacing
• .spacing-v-lg - vertical only, normal spacing applicable to large screen only
• .spacing-v-md - vertical only, normal spacing applicable to medium screen only
• .spacing-v-sm - vertical only, normal spacing applicable to small screen only

No Spacing(padding) - all sides

• .no-spacing - No spacing
• .no-spacing-lg - No spacing applicable to large screen only
• .no-spacing-md - No spacing applicable to medium screen only
• .no-spacing-sm - No spacing applicable to small screen only

No Spacing(padding) - horizontal only

• .no-spacing-h - horizontal only, No spacing
• .no-spacing-h-lg - horizontal only, No spacing applicable to large screen only
• .no-spacing-h-md - horizontal only, No spacing applicable to medium screen only
• .no-spacing-h-sm - horizontal only, No spacing applicable to small screen only

No Spacing(padding) - vertical only

• .no-spacing-v - vertical only, No spacing
• .no-spacing-v-lg - vertical only, No spacing applicable to large screen only
• .no-spacing-v-md - vertical only, No spacing applicable to medium screen only
• .no-spacing-v-sm - vertical only, No spacing applicable to small screen only

Outer Spacing(margin) - all sides

• .spacing-around - normal spacing
• .spacing-around-half - half spacing
• .spacing-around-lg - normal spacing applicable to large screen only
• .spacing-around-md - normal spacing applicable to medium screen only
• .spacing-around-sm - normal spacing applicable to small screen only

Outer Spacing(margin) - horizontal only

• .spacing-around-h - horizontal only, normal spacing
• .spacing-around-h-half - horizontal only, half spacing
• .spacing-around-h-lg - horizontal only, normal spacing applicable to large screen only
• .spacing-around-h-md - horizontal only, normal spacing applicable to medium screen only
• .spacing-around-h-sm - horizontal only, normal spacing applicable to small screen only

Outer Spacing(margin) - vertical only

• .spacing-around-v - vertical only, normal spacing
• .spacing-around-v-half - vertical only, half spacing
• .spacing-around-v-lg - vertical only, normal spacing applicable to large screen only
• .spacing-around-v-md - vertical only, normal spacing applicable to medium screen only
• .spacing-around-v-sm - vertical only, normal spacing applicable to small screen only

No Spacing(margin) - all sides

• .no-spacing-around - No spacing
• .no-spacing-around-lg - No spacing applicable to large screen only
• .no-spacing-around-md - No spacing applicable to medium screen only
• .no-spacing-around-sm - No spacing applicable to small screen only

No Spacing(margin) - horizontal only

• .no-spacing-around-h - horizontal only, No spacing
• .no-spacing-around-h-lg - horizontal only, No spacing applicable to large screen only
• .no-spacing-around-h-md - horizontal only, No spacing applicable to medium screen only
• .no-spacing-around-h-sm - horizontal only, No spacing applicable to small screen only

No Spacing(margin) - vertical only

• .no-spacing-around-v - vertical only, No spacing
• .no-spacing-around-v-lg - vertical only, No spacing applicable to large screen only
• .no-spacing-around-v-md - vertical only, No spacing applicable to medium screen only
• .no-spacing-around-v-sm - vertical only, No spacing applicable to small screen only

TEXT COLOR

Primary Theme Text color

• .primary-normal - theme colored text
• .primary-light - theme colored text
• .primary-lighter - theme colored text
• .primary-lightest - theme colored text
• .primary-deep-light - theme colored text
• .primary-dark - theme colored text
• .primary-darker - theme colored text
• .primary-darkest - theme colored text
• .primary-deep-dark - theme colored text

Secondary Theme Text color

• .secondary-normal - theme colored text
• .secondary-light - theme colored text
• .secondary-lighter - theme colored text
• .secondary-lightest - theme colored text
• .secondary-deep-light - theme colored text
• .secondary-dark - theme colored text
• .secondary-darker - theme colored text
• .secondary-darkest - theme colored text
• .secondary-deep-dark - theme colored text

Accent Theme Text color

• .accent-normal - theme colored text
• .accent-light - theme colored text
• .accent-lighter - theme colored text
• .accent-lightest - theme colored text
• .accent-deep-light - theme colored text
• .accent-dark - theme colored text
• .accent-darker - theme colored text
• .accent-darkest - theme colored text
• .accent-deep-dark - theme colored text

BACKGROUND COLOR

Primary Theme backgrounds

• .primary-normal-bg - theme colored background
• .primary-light-bg - theme colored background
• .primary-lighter-bg - theme colored background
• .primary-lightest-bg - theme colored background
• .primary-deep-light-bg - theme colored background
• .primary-dark-bg - theme colored background
• .primary-darker-bg - theme colored background
• .primary-darkest-bg - theme colored background
• .primary-deep-dark-bg - theme colored background

Secondary Theme backgrounds

• .secondary-normal-bg - theme colored background
• .secondary-light-bg - theme colored background
• .secondary-lighter-bg - theme colored background
• .secondary-lightest-bg - theme colored background
• .secondary-deep-light-bg - theme colored background
• .secondary-dark-bg - theme colored background
• .secondary-darker-bg - theme colored background
• .secondary-darkest-bg - theme colored background
• .secondary-deep-dark-bg - theme colored background

Accent Theme backgrounds

• .accent-normal-bg - theme colored background
• .accent-light-bg - theme colored background
• .accent-lighter-bg - theme colored background
• .accent-lightest-bg - theme colored background
• .accent-deep-light-bg - theme colored background
• .accent-dark-bg - theme colored background
• .accent-darker-bg - theme colored background
• .accent-darkest-bg - theme colored background
• .accent-deep-dark-bg - theme colored background

GRADIENT BACKGROUND

Primary Theme Diagonal Gradient backgrounds

• .primary-normal-grad - theme colored Diagonal Gradient background
• .primary-light-grad - theme colored Diagonal Gradient background
• .primary-lighter-grad - theme colored Diagonal Gradient background
• .primary-lightest-grad - theme colored Diagonal Gradient background
• .primary-deep-light-grad - theme colored Diagonal Gradient background
• .primary-dark-grad - theme colored Diagonal Gradient background
• .primary-darker-grad - theme colored Diagonal Gradient background
• .primary-darkest-grad - theme colored Diagonal Gradient background
• .primary-deep-dark-grad - theme colored Diagonal Gradient background

Secondary Theme Diagonal Gradient backgrounds

• .secondary-normal-grad - theme colored Diagonal Gradient background
• .secondary-light-grad - theme colored Diagonal Gradient background
• .secondary-lighter-grad - theme colored Diagonal Gradient background
• .secondary-lightest-grad - theme colored Diagonal Gradient background
• .secondary-deep-light-grad - theme colored Diagonal Gradient background
• .secondary-dark-grad - theme colored Diagonal Gradient background
• .secondary-darker-grad - theme colored Diagonal Gradient background
• .secondary-darkest-grad - theme colored Diagonal Gradient background
• .secondary-deep-dark-grad - theme colored Diagonal Gradient background

Accent Theme Diagonal Gradient backgrounds

• .accent-normal-grad - theme colored Diagonal Gradient background
• .accent-light-grad - theme colored Diagonal Gradient background
• .accent-lighter-grad - theme colored Diagonal Gradient background
• .accent-lightest-grad - theme colored Diagonal Gradient background
• .accent-deep-light-grad - theme colored Diagonal Gradient background
• .accent-dark-grad - theme colored Diagonal Gradient background
• .accent-darker-grad - theme colored Diagonal Gradient background
• .accent-darkest-grad - theme colored Diagonal Gradient background
• .accent-deep-dark-grad - theme colored Diagonal Gradient background

Primary Theme Horizontal Gradient backgrounds

• .primary-normal-grad-h - theme colored Horizontal Gradient background
• .primary-light-grad-h - theme colored Horizontal Gradient background
• .primary-lighter-grad-h - theme colored Horizontal Gradient background
• .primary-lightest-grad-h - theme colored Horizontal Gradient background
• .primary-deep-light-grad-h - theme colored Horizontal Gradient background
• .primary-dark-grad-h - theme colored Horizontal Gradient background
• .primary-darker-grad-h - theme colored Horizontal Gradient background
• .primary-darkest-grad-h - theme colored Horizontal Gradient background
• .primary-deep-dark-grad-h - theme colored Horizontal Gradient background

Secondary Theme Horizontal Gradient backgrounds

• .secondary-normal-grad-h - theme colored Horizontal Gradient background
• .secondary-light-grad-h - theme colored Horizontal Gradient background
• .secondary-lighter-grad-h - theme colored Horizontal Gradient background
• .secondary-lightest-grad-h - theme colored Horizontal Gradient background
• .secondary-deep-light-grad-h - theme colored Horizontal Gradient background
• .secondary-dark-grad-h - theme colored Horizontal Gradient background
• .secondary-darker-grad-h - theme colored Horizontal Gradient background
• .secondary-darkest-grad-h - theme colored Horizontal Gradient background
• .secondary-deep-dark-grad-h - theme colored Horizontal Gradient background

Accent Theme Horizontal Gradient backgrounds

• .accent-normal-grad-h - theme colored Horizontal Gradient background
• .accent-light-grad-h - theme colored Horizontal Gradient background
• .accent-lighter-grad-h - theme colored Horizontal Gradient background
• .accent-lightest-grad-h - theme colored Horizontal Gradient background
• .accent-deep-light-grad-h - theme colored Horizontal Gradient background
• .accent-dark-grad-h - theme colored Horizontal Gradient background
• .accent-darker-grad-h - theme colored Horizontal Gradient background
• .accent-darkest-grad-h - theme colored Horizontal Gradient background
• .accent-deep-dark-grad-h - theme colored Horizontal Gradient background

Primary Theme Vertical Gradient backgrounds

• .primary-normal-grad-v - theme colored Vertical Gradient background
• .primary-light-grad-v - theme colored Vertical Gradient background
• .primary-lighter-grad-v - theme colored Vertical Gradient background
• .primary-lightest-grad-v - theme colored Vertical Gradient background
• .primary-deep-light-grad-v - theme colored Vertical Gradient background
• .primary-dark-grad-v - theme colored Vertical Gradient background
• .primary-darker-grad-v - theme colored Vertical Gradient background
• .primary-darkest-grad-v - theme colored Vertical Gradient background
• .primary-deep-dark-grad-v - theme colored Vertical Gradient background

Secondary Theme Vertical Gradient backgrounds

• .secondary-normal-grad-v - theme colored Vertical Gradient background
• .secondary-light-grad-v - theme colored Vertical Gradient background
• .secondary-lighter-grad-v - theme colored Vertical Gradient background
• .secondary-lightest-grad-v - theme colored Vertical Gradient background
• .secondary-deep-light-grad-v - theme colored Vertical Gradient background
• .secondary-dark-grad-v - theme colored Vertical Gradient background
• .secondary-darker-grad-v - theme colored Vertical Gradient background
• .secondary-darkest-grad-v - theme colored Vertical Gradient background
• .secondary-deep-dark-grad-v - theme colored Vertical Gradient background

Accent Theme Vertical Gradient backgrounds

• .accent-normal-grad-v - theme colored Vertical Gradient background
• .accent-light-grad-v - theme colored Vertical Gradient background
• .accent-lighter-grad-v - theme colored Vertical Gradient background
• .accent-lightest-grad-v - theme colored Vertical Gradient background
• .accent-deep-light-grad-v - theme colored Vertical Gradient background
• .accent-dark-grad-v - theme colored Vertical Gradient background
• .accent-darker-grad-v - theme colored Vertical Gradient background
• .accent-darkest-grad-v - theme colored Vertical Gradient background
• .accent-deep-dark-grad-v - theme colored Vertical Gradient background