@enki-tek/fms-web-components 0.0.2 → 0.0.4

package/components/common.scss

@@ -0,0 +1,789 @@
+@import './variable.scss';
+
+
+//common
+%efs-normal {
+    font-family: $bodyFonts;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+}
+
+%efs-normal-modal {
+    font-family: $bodyFonts;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+}
+
+%common-Accordion-font {
+    color: $gray-800;
+    font-weight: 400;
+    font-style: normal;
+    line-height: normal;
+    border: 1px solid $gray-400;
+    background-color: $white;
+    font-family: $bodyFonts;
+}
+
+
+//background color classess ,active classess
+:global(.ebg-none) {
+    background-color: $white !important;
+}
+
+:global(.ebg-white) {
+    background-color: $white;
+}
+
+:global(.ebg-secondary, .eactive-secondary:active, .ehover-secondary:hover) {
+    background-color: $secondary !important;
+}
+
+:global(.ebg-secondaryDark, .eactive-secondaryDark:active, .ehover-secondaryDark:hover) {
+    background-color: $secondary-dark;
+}
+
+:global(.ebg-secondaryLight, .eactive-secondaryLight:active, .ehover-secondaryLight:hover) {
+    background-color: $secondary-light;
+}
+
+:global(.ebg-primary) {
+    background-color: $primary;
+}
+
+:global(.ebg-primaryDark) {
+    background-color: $primary-dark;
+}
+
+:global(.ebg-primaryLight) {
+    background-color: $primary-light;
+}
+
+:global(.ebg-danger) {
+    background-color: $danger ;
+}
+
+:global(.ebg-dangerDark) {
+    background-color: $danger-dark;
+}
+
+:global(.ebg-dangerLight) {
+    background-color: $danger-light;
+}
+
+:global(.ebg-warning) {
+    background-color: $warning;
+}
+
+:global(.ebg-warningDark) {
+    background-color: $warning-dark;
+    color: $white !important;
+}
+
+:global(.ebg-warningLight) {
+    background-color: $warning-light;
+}
+
+
+:global(.ebg-info) {
+    background-color: $info;
+}
+
+:global(.ebg-infoDark) {
+    background-color: $info-dark;
+}
+
+:global(.ebg-infoLight) {
+    background-color: $info-light;
+}
+
+
+:global(.ebg-success) {
+    background-color: $success;
+}
+
+:global(.ebg-successDark) {
+    background-color: $success-dark;
+}
+
+:global(.ebg-successLight) {
+    background-color: $success-light;
+}
+
+:global(.ebg-gray100) {
+    background-color: $gray-100;
+}
+
+:global(.ebg-gray200) {
+    background-color: $gray-200;
+}
+
+:global(.ebg-gray300) {
+    background-color: $gray-300;
+}
+
+:global(.ebg-gray400) {
+    background-color: $gray-400;
+}
+
+:global(.ebg-gray500) {
+    background-color: $gray-500;
+}
+
+:global(.ebg-gray600) {
+    background-color: $gray-600;
+}
+
+:global(.ebg-gray700) {
+    background-color: $gray-700;
+}
+
+:global(.ebg-gray800) {
+    background-color: $gray-800;
+}
+
+:global(.ebg-gray900) {
+    background-color: $gray-900;
+}
+
+// green background
+:global(.ebg-green100) {
+    background-color: $green-100;
+}
+
+:global(.ebg-green200) {
+    background-color: $green-200;
+}
+
+:global(.ebg-green300) {
+    background-color: $green-300;
+}
+
+:global(.ebg-green400) {
+    background-color: $green-400;
+}
+
+:global(.ebg-green500) {
+    background-color: $green-500;
+}
+
+:global(.ebg-green600) {
+    background-color: $green-600;
+}
+
+:global(.ebg-green700) {
+    background-color: $green-700;
+}
+
+:global(.ebg-green800) {
+    background-color: $green-800;
+}
+
+:global(.ebg-green900) {
+    background-color: $green-900;
+}
+
+// red background
+:global(.ebg-red100) {
+    background-color: $red-100;
+}
+
+:global(.ebg-red200) {
+    background-color: $red-200;
+}
+
+:global(.ebg-red300) {
+    background-color: $red-300;
+}
+
+:global(.ebg-red400) {
+    background-color: $red-400;
+}
+
+:global(.ebg-red500) {
+    background-color: $red-500;
+}
+
+:global(.ebg-red600) {
+    background-color: $red-600;
+}
+
+:global(.ebg-red700) {
+    background-color: $red-700;
+}
+
+:global(.ebg-red800) {
+    background-color: $red-800;
+}
+
+:global(.ebg-red900) {
+    background-color: $red-900;
+}
+
+
+// yellow background
+:global(.ebg-yellow100) {
+    background-color: $yellow-100;
+}
+
+:global(.ebg-yellow200) {
+    background-color: $yellow-200;
+}
+
+:global(.ebg-yellow300) {
+    background-color: $yellow-300;
+}
+
+:global(.ebg-yellow400) {
+    background-color: $yellow-400;
+}
+
+:global(.ebg-yellow500) {
+    background-color: $yellow-500;
+}
+
+:global(.ebg-yellow600) {
+    background-color: $yellow-600;
+}
+
+:global(.ebg-yellow700) {
+    background-color: $yellow-700;
+}
+
+:global(.ebg-yellow800) {
+    background-color: $yellow-800;
+}
+
+:global(.ebg-yellow900) {
+    background-color: $yellow-900;
+}
+
+
+// cyan background
+:global(.ebg-cyan100) {
+    background-color: $cyan-100;
+}
+
+:global(.ebg-cyan200) {
+    background-color: $cyan-200;
+}
+
+:global(.ebg-cyan300) {
+    background-color: $cyan-300;
+}
+
+:global(.ebg-cyan400) {
+    background-color: $cyan-400;
+}
+
+:global(.ebg-cyan500) {
+    background-color: $cyan-500;
+}
+
+:global(.ebg-cyan600) {
+    background-color: $cyan-600;
+}
+
+:global(.ebg-cyan700) {
+    background-color: $cyan-700;
+}
+
+:global(.ebg-cyan800) {
+    background-color: $cyan-800;
+}
+
+:global(.ebg-cyan900) {
+    background-color: $cyan-900;
+}
+
+// Text color classess
+
+.etext-white {
+    color: $white;
+}
+
+:global(.etext-dark) {
+    color: $black;
+}
+
+:global(.etext-secondary) {
+    color: $secondary;
+}
+
+:global(.etext-secondaryDark) {
+    color: $secondary-dark;
+}
+
+:global(.etext-secondaryLight) {
+    color: $secondary-light;
+}
+
+:global(.etext-primary) {
+    color: $primary;
+}
+
+:global(.etext-primaryDark) {
+    color: $primary-dark;
+}
+
+:global(.etext-primaryLight) {
+    color: $primary-light;
+}
+
+:global(.etext-danger) {
+    color: $danger;
+}
+
+:global(.etext-dangerDark) {
+    color: $danger-dark;
+}
+
+:global(.etext-dangerLight) {
+    color: $danger-light;
+}
+
+:global(.etext-info) {
+    color: $info;
+}
+
+:global(.etext-infoDark) {
+    color: $info-dark;
+}
+
+:global(.etext-infoLight) {
+    color: $info-light;
+}
+
+:global(.etext-success) {
+    color: $success;
+}
+
+:global(.etext-successDark) {
+    color: $success-dark;
+}
+
+:global(.etext-successLight) {
+    color: $success-light;
+}
+
+:global(.etext-warning) {
+    color: $warning;
+}
+
+:global(.etext-warningDark) {
+    color: $warning-dark;
+}
+
+:global(.etext-warningLight) {
+    color: $warning-light;
+}
+
+
+:global(.etext-gray100) {
+    color: $gray-100;
+}
+
+:global(.etext-gray200) {
+    color: $gray-200;
+}
+
+:global(.etext-gray300) {
+    color: $gray-300;
+}
+
+:global(.etext-gray400) {
+    color: $gray-400;
+}
+
+:global(.etext-gray500) {
+    color: $gray-500;
+}
+
+:global(.etext-gray600) {
+    color: $gray-600;
+}
+
+:global(.etext-gray700) {
+    color: $gray-700;
+}
+
+:global(.etext-gray800) {
+    color: $gray-800;
+}
+
+:global(.etext-gray900) {
+    color: $gray-900;
+}
+
+// green text
+:global(.etext-green100) {
+    color: $green-100;
+}
+
+:global(.etext-green200) {
+    color: $green-200;
+}
+
+:global(.etext-green300) {
+    color: $green-300;
+}
+
+:global(.etext-green400) {
+    color: $green-400;
+}
+
+:global(.etext-green500) {
+    color: $green-500;
+}
+
+:global(.etext-green600) {
+    color: $green-600;
+}
+
+:global(.etext-green700) {
+    color: $green-700;
+}
+
+:global(.etext-green800) {
+    color: $green-800;
+}
+
+:global(.etext-green900) {
+    color: $green-900;
+}
+
+// red text
+:global(.etext-red100) {
+    color: $red-100;
+}
+
+:global(.etext-red200) {
+    color: $red-200;
+}
+
+:global(.etext-red300) {
+    color: $red-300;
+}
+
+:global(.etext-red400) {
+    color: $red-400;
+}
+
+:global(.etext-red500) {
+    color: $red-500;
+}
+
+:global(.etext-red600) {
+    color: $red-600;
+}
+
+:global(.etext-red700) {
+    color: $red-700;
+}
+
+:global(.etext-red800) {
+    color: $red-800;
+}
+
+:global(.etext-red900) {
+    color: $red-900;
+}
+
+// yellow text
+:global(.etext-yellow100) {
+    color: $yellow-100;
+}
+
+:global(.etext-yellow200) {
+    color: $yellow-200;
+}
+
+:global(.etext-yellow300) {
+    color: $yellow-300;
+}
+
+:global(.etext-yellow400) {
+    color: $yellow-400;
+}
+
+:global(.etext-yellow500) {
+    color: $yellow-500;
+}
+
+:global(.etext-yellow600) {
+    color: $yellow-600;
+}
+
+:global(.etext-yellow700) {
+    color: $yellow-700;
+}
+
+:global(.etext-yellow800) {
+    color: $yellow-800;
+}
+
+:global(.etext-yellow900) {
+    color: $yellow-900;
+}
+
+// cyan text
+:global(.etext-cyan100) {
+    color: $cyan-100;
+}
+
+:global(.etext-cyan200) {
+    color: $cyan-200;
+}
+
+:global(.etext-cyan300) {
+    color: $cyan-300;
+}
+
+:global(.etext-cyan400) {
+    color: $cyan-400;
+}
+
+:global(.etext-cyan500) {
+    color: $cyan-500;
+}
+
+:global(.etext-cyan600) {
+    color: $cyan-600;
+}
+
+:global(.etext-cyan700) {
+    color: $cyan-700;
+}
+
+:global(.etext-cyan800) {
+    color: $cyan-800;
+}
+
+:global(.etext-cyan900) {
+    color: $cyan-900;
+}
+
+
+//outline classess
+
+:global(.eoutline-secondary) {
+    outline: 1px solid $secondary;
+}
+
+:global(.eoutline-secondaryDark) {
+    outline: 1px solid $secondary-dark;
+}
+
+:global(.eoutline-secondaryLight) {
+    outline: 1px solid $secondary-light;
+}
+
+:global(.eoutline-primary) {
+    outline: 1px solid $primary;
+}
+
+:global(.eoutline-primaryDark) {
+    outline: 1px solid $primary-dark;
+}
+
+:global(.eoutline-primaryLight) {
+    outline: 1px solid $primary-light;
+}
+
+:global(.eoutline-danger) {
+    outline: 1px solid $danger;
+}
+
+:global(.eoutline-dangerDark) {
+    outline: 1px solid $danger-dark;
+}
+
+:global(.eoutline-dangerLight) {
+    outline: 1px solid $danger-light;
+}
+
+:global(.eoutline-success) {
+    outline: 1px solid $success;
+}
+
+:global(.eoutline-successDark) {
+    outline: 1px solid $success-dark;
+}
+
+:global(.eoutline-successLight) {
+    outline: 1px solid $success-light;
+}
+
+:global(.eoutline-info) {
+    outline: 1px solid $info;
+}
+
+:global(.eoutline-infoDark) {
+    outline: 1px solid $info-dark;
+}
+
+:global(.eoutline-infoLight) {
+    outline: 1px solid $info-light;
+}
+
+:global(.eoutline-warning) {
+    outline: 1px solid $warning;
+}
+
+:global(.eoutline-warningDark) {
+    outline: 1px solid $warning-dark;
+}
+
+:global(.eoutline-warningLight) {
+    outline: 1px solid $warning-light;
+}
+
+
+//Border radius
+
+:global(.eradius) {
+    border-radius: 4px;
+}
+
+:global(.eradius-low) {
+    border-radius: 8px;
+}
+
+:global(.eradius-medium) {
+    border-radius: 16px;
+}
+
+:global(.eradius-full) {
+    border-radius: 50%;
+}
+
+//box shadow
+
+.eshadow-non {
+    box-shadow: $nonShadow;
+}
+
+.eshadow-low {
+    box-shadow: $lowShadow;
+}
+
+.eshadow-medium {
+    box-shadow: $mediumShadow;
+}
+
+.eshadow-high {
+    box-shadow: $highShadow;
+}
+
+
+// Font sizes & styles
+
+:global(.efs-small) {
+    font-family: $bodyFonts;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+:global(.efs-normal) {
+    font-family: $bodyFonts;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+}
+
+:global(.efs-strong) {
+    font-family: $bodyFonts;
+    font-size: 17px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: 28px;
+}
+
+:global(.efs-h6) {
+    font-family: $bodyFonts;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:global(.efs-h5) {
+    font-family: $bodyFonts;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:global(.efs-h4) {
+    font-family: $bodyFonts;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:global(.efs-h3) {
+    font-family: $bodyFonts;
+    font-size: 28px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:global(.efs-h2) {
+    font-family: $bodyFonts;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+}
+
+:global(.efs-h1) {
+    font-family: $bodyFonts;
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 700;
+    line-height: normal;
+    letter-spacing: -0.8px;
+}
+
+//Display heading fonts styles
+
+:global(.efs-h4D) {
+    font-family: Merriweather;
+    font-size: 52px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+:global(.efs-h3D) {
+    font-family: Merriweather;
+    font-size: 58px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}
+
+:global(.efs-h2D) {
+    font-family: Merriweather;
+    font-size: 64px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: -1.28px;
+}
+
+:global(.efs-h1D) {
+    font-family: Merriweather;
+    font-size: 72px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+}