@webitel/styleguide 26.2.0-1 → 26.2.2

package/src/lib/styleguide/typography/_typography.scss

@@ -0,0 +1,146 @@
+/*
+NOTE:   text-transform: none; is set explicitly cause t-t is inherited from parent
+ */
+
+%typo-heading-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 32px;
+    weight: 600;
+  }
+  line-height: 48px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 24px;
+    weight: 600;
+  }
+  line-height: 40px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-3 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 20px;
+    weight: 600;
+  }
+  line-height: 32px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-heading-4 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 16px;
+    weight: 600;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 500;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-subtitle-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: none;
+  //letter-spacing: 0.28px; // 0.02em
+}
+
+%typo-body-1 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 400;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-1-bold {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 14px;
+    weight: 700;
+  }
+  line-height: 24px;
+  text-transform: none;
+  //letter-spacing: 0.56px; // 0.04em
+}
+
+%typo-body-2 {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-body-2-bold {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 700;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.16px; // 0.01em
+}
+
+%typo-button {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 24px;
+  text-transform: uppercase;
+  //letter-spacing: 0.96px; // 0.06em
+}
+
+%typo-caption {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 10px;
+    weight: 400;
+  }
+  line-height: 16px;
+  text-transform: none;
+  //letter-spacing: 0.48px; // 0.03em
+}
+
+%typo-overline {
+  font: {
+    family: 'Montserrat', monospace;
+    size: 12px;
+    weight: 500;
+  }
+  line-height: 20px;
+  text-transform: uppercase;
+  //letter-spacing: 2.56px; // 0.16em
+}

package/src/lib/styleguide/viewport-breakpoints/_viewport-breakpoints.scss

@@ -1,4 +1,17 @@
-// SCSS variables for backward compatibility - now use CSS custom properties
+/*
+xl: @media only screen and (min-width: $viewport-xl) {}
+lg: @media only screen and (max-width: $viewport-xl) {}
+md: @media only screen and (max-width: $viewport-lg) {}
+sm: @media only screen and (max-width: $viewport-md) {}
+xs: @media only screen and (max-width: $viewport-sm) {}
+ */
+
+// OLD, REMOVE ME
+//$viewport-xl: 1440px;
+//$viewport-lg: 1280px;
+//$viewport-md: 992px;
+//$viewport-sm: 600px;
+
 $viewport-lg: 1904px; // and lower
 $viewport-md: 1264px; // and lower
 $viewport-sm: 960px; // and lower
@@ -8,4 +21,5 @@ $media: #{'only screen'};
 $media-width-lg: #{'min-width: '} $viewport-lg;
 $media-width-md: #{'max-width: '} $viewport-md;
 $media-width-sm: #{'max-width: '} $viewport-sm;
-$media-width-xs: #{'max-width: '} $viewport-xs;
+$media-width-xs: #{'max-width: '} $viewport-xs;
+

package/src/enums/WtTypography/WtTypography.enum.ts

@@ -1,15 +0,0 @@
-export const WtTypography = {
-    Button: 'typo-button',
-    Body1: 'typo-body-1',
-    Body2: 'typo-body-2',
-    Subtitle1: 'typo-subtitle-1',
-    Subtitle2: 'typo-subtitle-2',
-    Heading1: 'typo-heading-1',
-    Heading2: 'typo-heading-2',
-    Heading3: 'typo-heading-3',
-    Heading4: 'typo-heading-4',
-    Caption: 'typo-caption',
-    Overline: 'typo-overline',
-} as const;
-
-export type WtTypography = (typeof WtTypography)[keyof typeof WtTypography];

package/src/enums/index.ts

@@ -1 +0,0 @@
-export * from './WtTypography/WtTypography.enum';

package/src/lib/main.css

@@ -1,2 +0,0 @@
-@import './styleguide/styleguide.css';
-

package/src/lib/primevue/semantic/sizes/typography/index.ts

@@ -1,95 +0,0 @@
-import { WtTypography } from '@webitel/styleguide/enums';
-
-/**
- * refers to the typography.css file
- */
-export default {
-    [WtTypography.Heading1]: {
-        font: {
-            size: '32px',
-            weight: '600',
-        },
-        lineHeight: '48px',
-        textTransform: 'none',
-    },
-    [WtTypography.Heading2]: {
-        font: {
-            size: '24px',
-            weight: '600',
-        },
-        lineHeight: '40px',
-        textTransform: 'none',
-    },
-    [WtTypography.Heading3]: {
-        font: {
-            size: '20px',
-            weight: '600',
-        },
-        lineHeight: '32px',
-        textTransform: 'none',
-    },
-    [WtTypography.Heading4]: {
-        font: {
-            size: '16px',
-            weight: '600',
-        },
-        lineHeight: '24px',
-        textTransform: 'none',
-    },
-    [WtTypography.Subtitle1]: {
-        font: {
-            size: '14px',
-            weight: '500',
-        },
-        lineHeight: '24px',
-        textTransform: 'none',
-    },
-    [WtTypography.Subtitle2]: {
-        font: {
-            size: '12px',
-            weight: '500',
-        },
-        lineHeight: '20px',
-        textTransform: 'none',
-    },
-    [WtTypography.Body1]: {
-        font: {
-            size: '14px',
-            weight: '400',
-        },
-        lineHeight: '24px',
-        textTransform: 'none',
-    },
-    [WtTypography.Body2]: {
-        font: {
-            size: '12px',
-            weight: '400',
-        },
-        lineHeight: '16px',
-        textTransform: 'none',
-    },
-    [WtTypography.Button]: {
-        font: {
-            size: '12px',
-            weight: '500',
-        },
-        lineHeight: '24px',
-        textTransform: 'uppercase',
-    },
-    [WtTypography.Caption]: {
-        font: {
-            size: '10px',
-            weight: '400',
-        },
-        lineHeight: '16px',
-        textTransform: 'none',
-    },
-    [WtTypography.Overline]: {
-        font: {
-            size: '12px',
-            weight: '500',
-        },
-        lineHeight: '20px',
-        textTransform: 'uppercase',
-    },
-};

package/src/lib/styleguide/border-radius/border-radius.css

@@ -1,4 +0,0 @@
-:root {
-    --border-radius: var(--spacing-2xs);
-    --border-radius--pill: 50px;
-}

package/src/lib/styleguide/colors/colors.css

@@ -1,206 +0,0 @@
-@import './palette.css';
-@import './deprecated.css';
-@import './reusable/text-field.css';
-
-:root {
-    /* dp colors */
-    --dp-24-surface-color: hsl(0, 0%, 100%);
-    --dp-23-surface-color: hsl(225, 20%, 99%);
-    --dp-22-surface-color: hsl(225, 20%, 98%);
-    --dp-21-surface-color: hsl(225, 20%, 97%);
-    --dp-20-surface-color: hsl(225, 20%, 96%);
-    --dp-19-surface-color: hsl(225, 20%, 95%);
-    --dp-18-surface-color: hsl(225, 20%, 94%);
-    --dp-17-surface-color: hsl(225, 20%, 93%);
-    --dp-16-surface-color: hsl(225, 20%, 92%);
-    --dp-15-surface-color: hsl(225, 20%, 91%);
-    --dp-14-surface-color: hsl(225, 20%, 90%);
-    --dp-13-surface-color: hsl(225, 20%, 89%);
-    --dp-12-surface-color: hsl(225, 20%, 88%);
-    --dp-11-surface-color: hsl(225, 20%, 87%);
-    --dp-10-surface-color: hsl(225, 20%, 86%);
-    --dp-9-surface-color: hsl(225, 20%, 85%);
-    --dp-8-surface-color: hsl(225, 20%, 84%);
-    --dp-7-surface-color: hsl(225, 20%, 83%);
-    --dp-6-surface-color: hsl(225, 20%, 82%);
-    --dp-5-surface-color: hsl(225, 20%, 81%);
-    --dp-4-surface-color: hsl(225, 20%, 80%);
-    --dp-3-surface-color: hsl(225, 20%, 79%);
-    --dp-2-surface-color: hsl(225, 20%, 78%);
-    --dp-1-surface-color: hsl(225, 20%, 77%);
-
-    /* content wrapper */
-    --content-wrapper-color: var(--p-content-background);
-    --content-wrapper-hover-color: var(--p-content-hover-background);
-
-    /* success colors */
-    --success-color: var(--green-darken-4);
-    --success-hover-color: var(--green-darken-3);
-    --success-light-color: var(--green-lighten-4);
-    --success-on-color: var(--white);
-
-    /* warning colors */
-    --warning-color: var(--orange-accent-2);
-    --warning-hover-color: var(--orange-accent-1);
-    --warning-light-color: var(--orange-lighten-4);
-    --warning-on-color: var(--black);
-
-    /* error colors */
-    --error-color: var(--red-accent-2);
-    --error-hover-color: var(--red-lighten-2);
-    --error-light-color: var(--red-lighten-4);
-    --error-on-color: var(--white);
-
-    /* info colors */
-    --info-color: var(--blue-darken-1);
-    --info-hover-color: var(--blue-lighten-1);
-    --info-light-color: var(--blue-lighten-4);
-    --info-on-color: var(--black);
-
-    /* job colors */
-    --job-color: var(--blue-darken-1);
-    --job-hover-color: var(--blue-lighten-1);
-    --job-light-color: var(--blue-lighten-4);
-    --job-on-color: var(--black);
-
-    /* chat colors */
-    --chat-color: var(--indigo-accent-2);
-    --chat-hover-color: var(--indigo-accent-1);
-    --chat-light-color: var(--indigo-lighten-4);
-    --chat-on-color: var(--black);
-
-    /* transfer colors */
-    --transfer-color: var(--indigo-lighten-1);
-    --transfer-hover-color: var(--indigo-lighten-2);
-    --transfer-light-color: var(--indigo-lighten-4);
-    --transfer-on-color: var(--white);
-
-    /* primary colors */
-    --primary-color: var(--amber-accent-3);
-    --primary-hover-color: var(--amber-accent-2);
-    --primary-light-color: var(--amber-lighten-3);
-    --primary-on-color: var(--black);
-
-    /* secondary colors */
-    --secondary-color: var(--dp-10-surface-color);
-    --secondary-hover-color: var(--dp-14-surface-color);
-    --secondary-light-color: var(--dp-16-surface-color);
-    --secondary-on-color: var(--grey-darken-4);
-
-    /* email colors */
-    --email-color: var(--blue-darken-3);
-    --email-hover-color: var(--blue-darken-2);
-    --email-light-color: var(--blue-lighten-2);
-    --email-on-color: var(--black);
-
-    /* accent colors */
-    --accent-color: var(--purple-lighten-1);
-    --sub-accent-color: var(--indigo-darken-3);
-
-    /* typography colors */
-    --text-main-color: var(--grey-darken-3);
-    --text-disabled-color: var(--grey-lighten-1);
-    --text-error-color: var(--error-color);
-    --text-success-color: var(--success-color);
-    --text-link-color: var(--info-color);
-    /* typography on colors */
-    --text-on-brand-color: var(--white);
-}
-
-:root.theme--dark {
-    /* dp colors */
-    --dp-24-surface-color: hsl(225, 20%, 25%);
-    --dp-23-surface-color: hsl(225, 20%, 24%);
-    --dp-22-surface-color: hsl(225, 20%, 23%);
-    --dp-21-surface-color: hsl(225, 20%, 22%);
-    --dp-20-surface-color: hsl(225, 20%, 21%);
-    --dp-19-surface-color: hsl(225, 20%, 20%);
-    --dp-18-surface-color: hsl(225, 20%, 19%);
-    --dp-17-surface-color: hsl(225, 20%, 18%);
-    --dp-16-surface-color: hsl(225, 20%, 17%);
-    --dp-15-surface-color: hsl(225, 20%, 16%);
-    --dp-14-surface-color: hsl(225, 20%, 15%);
-    --dp-13-surface-color: hsl(225, 20%, 14%);
-    --dp-12-surface-color: hsl(225, 20%, 13%);
-    --dp-11-surface-color: hsl(225, 20%, 12%);
-    --dp-10-surface-color: hsl(225, 20%, 11%);
-    --dp-9-surface-color: hsl(225, 20%, 10%);
-    --dp-8-surface-color: hsl(225, 20%, 9%);
-    --dp-7-surface-color: hsl(225, 20%, 8%);
-    --dp-6-surface-color: hsl(225, 20%, 7%);
-    --dp-5-surface-color: hsl(225, 20%, 6%);
-    --dp-4-surface-color: hsl(225, 20%, 5%);
-    --dp-3-surface-color: hsl(225, 20%, 4%);
-    --dp-2-surface-color: hsl(225, 20%, 3%);
-    --dp-1-surface-color: hsl(225, 20%, 2%);
-
-    /* success colors */
-    --success-color: var(--green-darken-4);
-    --success-hover-color: var(--green-darken-3);
-    --success-light-color: var(--green-lighten-3);
-    --success-on-color: var(--black);
-
-    /* warning colors */
-    --warning-color: var(--orange-accent-2);
-    --warning-hover-color: var(--orange-accent-1);
-    --warning-light-color: var(--orange-lighten-3);
-    --warning-on-color: var(--black);
-
-    /* error colors */
-    --error-color: var(--red-accent-2);
-    --error-hover-color: var(--red-lighten-2);
-    --error-light-color: var(--red-lighten-3);
-    --error-on-color: var(--black);
-
-    /* info colors */
-    --info-color: var(--blue-darken-1);
-    --info-hover-color: var(--blue-lighten-1);
-    --info-light-color: var(--blue-lighten-3);
-    --info-on-color: var(--white);
-
-    /* job colors */
-    --job-color: var(--blue-darken-1);
-    --job-hover-color: var(--blue-lighten-1);
-    --job-light-color: var(--blue-lighten-3);
-    --job-on-color: var(--white);
-
-    /* chat colors */
-    --chat-color: var(--indigo-accent-2);
-    --chat-hover-color: var(--indigo-accent-1);
-    --chat-light-color: var(--indigo-lighten-3);
-    --chat-on-color: var(--white);
-
-    /* transfer colors */
-    --transfer-color: var(--indigo-darken-1);
-    --transfer-hover-color: var(--indigo-lighten-1);
-    --transfer-light-color: var(--indigo-lighten-4);
-    --transfer-on-color: var(--white);
-
-    /* primary colors */
-    --primary-color: var(--amber-darken-2);
-    --primary-hover-color: var(--amber-darken-1);
-    --primary-light-color: var(--amber-darken-4);
-    --primary-on-color: var(--black);
-
-    /* secondary colors */
-    --secondary-on-color: var(--grey-lighten-4);
-
-    /* email colors */
-    --email-color: var(--blue-darken-3);
-    --email-hover-color: var(--blue-darken-2);
-    --email-light-color: var(--blue-lighten-1);
-    --email-on-color: var(--white);
-
-    /* accent colors */
-    --accent-color: var(--purple-lighten-1);
-    --sub-accent-color: var(--indigo-darken-3);
-
-    /* typography colors */
-    --text-main-color: var(--grey-lighten-3);
-    --text-disabled-color: var(--grey-darken-1);
-    --text-error-color: var(--error-color);
-    --text-success-color: var(--success-color);
-    --text-link-color: var(--info-color);
-    /* typography on colors */
-    --text-on-brand-color: var(--white);
-}

package/src/lib/styleguide/colors/deprecated.css

@@ -1,150 +0,0 @@
-:root {
-    /* HSL COLORS HUE VALUE */
-    --_accent-color-hue: 42;
-    --_secondary-color-hue: 202;
-    --_page-bg-color-hue: 209;
-    --_icon-color-hue: 202;
-    --_positive-color-hue: 119;
-    --_negative-color-hue: 11;
-
-    --_hold-color-hue: 54;
-    --_transfer-color-hue: 227;
-    --_job-color-hue: 209;
-
-    /* DEFAULT STATES OPACITY */
-    --_opacity--default: 0.8;
-    --_opacity--hover: 1;
-    --_opacity--active: 1;
-    --_opacity--focus: 0.8;
-    --_opacity--disabled: 0.4;
-
-    /* BASIC HSL COLORS VALUES */
-    --_accent-color: var(--_accent-color-hue), 100%, 50%;
-    --_main-color: var(--_accent-color-hue), 20%, 99%;
-    --_contrast-color: var(--_accent-color-hue), 20%, 1%;
-    --_secondary-color: var(--_secondary-color-hue), 20%, 90%;
-    --_secondary-color-50: var(--_secondary-color-hue), 22%, 96%;
-    --_page-bg-color: var(--_page-bg-color-hue), 20%, 95%;
-    --_header-color: var(--_page-bg-color-hue), 20%, 90%;
-    --_positive-color: var(--_positive-color-hue), 60%, 40%;
-    --_negative-color: var(--_negative-color-hue), 80%, 50%;
-    --_icon-color: var(--_icon-color-hue), 100%, 15%;
-
-    --_hold-color: var(--_hold-color-hue), 80%, 50%;
-    --_transfer-color: var(--_transfer-color-hue), 80%, 50%;
-    --_job-color: var(--_job-color-hue), 96%, 57%;
-
-    /* MAIN COLORS */
-    --accent-color: hsla(var(--_accent-color), 1);
-
-    --main-color: hsla(var(--_main-color), 1);
-
-    --contrast-color: hsla(var(--_contrast-color), 1);
-
-    --secondary-color: hsla(var(--_secondary-color), 1);
-    --secondary-color-50: hsla(var(--_secondary-color-50), 1);
-
-    /* ICON COLORS */
-    --icon-color-secondary: hsla(var(--_icon-color), 0.25);
-
-    --icon-color--hover: hsla(var(--_icon-color), var(--_opacity--hover));
-
-    --icon-color-accent: var(--accent-color);
-    --icon-color-contrast: hsla(var(--_main-color), var(--_opacity--default));
-    --icon-color-active: var(--icon-color--hover);
-    --icon-color-disabled: hsla(var(--_icon-color), var(--_opacity--disabled));
-    --icon-color-success: var(--true-color);
-    --icon-color-danger: var(--false-color);
-    --icon-color-transfer: var(--transfer-color);
-    --icon-color-hold: var(--hold-color);
-    --icon-color-secondary-50: var(--secondary-color-50);
-
-
-    --page-bg-color: hsla(var(--_page-bg-color), 1);
-    --header-color: hsla(var(--_header-color), 1);
-
-    --accent-secondary-color: hsla(var(--_accent-color), 0.3);
-
-    /* SEMANTIC COLORS */
-    --disabled-color: hsl(var(--_contrast-color), var(--_opacity--disabled));
-
-    --true-color: hsla(var(--_positive-color), var(--_opacity--default));
-    --true--hover-color: hsla(var(--_positive-color), var(--_opacity--hover));
-
-    --false-color: hsla(var(--_negative-color), var(--_opacity--default));
-    --false--hover-color: hsla(var(--_negative-color), var(--_opacity--hover));
-
-    --hold-color: hsla(var(--_hold-color), var(--_opacity--default));
-    --hold--hover-color: hsla(var(--_hold-color), var(--_opacity--hover));
-
-    --transfer-color: hsla(var(--_transfer-color), var(--_opacity--default));
-    --transfer--hover-color: hsla(var(--_transfer-color), var(--_opacity--hover));
-
-    --job-color: hsla(var(--_job-color), var(--_opacity--default));
-    --job--hover-color: hsla(var(--_job-color), var(--_opacity--hover));
-
-    --link-color: hsla(205, 90%, 45%, 1);
-    --link--hover-color: hsla(205, 90%, 60%, 1);
-
-    /* SUBORDINATE COLORS */
-    --tag-bg-color: var(--accent-secondary-color);
-
-    /* FORM STATES OPACITY */
-    --form-opacity--default: var(--_opacity--default);
-    --form-opacity--hover: var(--_opacity--hover);
-    --form-opacity--active: var(--_opacity--active);
-    --form-opacity--focus: var(--_opacity--focus);
-    --form-opacity--disabled: var(--_opacity--disabled);
-
-    --form-placeholder-opacity: 0.6;
-    --form-placeholder-opacity--focus: 0.4;
-    --form-border-opacity--disabled: 0.05;
-
-    --form-opacity--ouline--default: 0.4;
-    --form-opacity--ouline--hover: 0.7;
-
-    /* FORM COLORS */
-    --form-input-color: var(--contrast-color);
-    /* user input color */
-
-    --form-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-    --form-label--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
-    --form-label--active-color: hsla(var(--_contrast-color), var(--form-opacity--active));
-    --form-label--disabled-color: hsla(var(--_contrast-color), var(--form-opacity--disabled));
-
-    --form-border-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-    --form-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--hover));
-    --form-border--disabled-color: hsla(var(--_contrast-color), var(--form-border-opacity--disabled));
-
-    --form-placeholder-color: hsla(var(--_contrast-color), var(--form-placeholder-opacity));
-    --form-placeholder-color--focus: hsla(var(--_contrast-color), var(--form-placeholder-opacity--focus));
-    --form-placeholder-color--disabled: hsla(var(--_contrast-color), var(--form-opacity--disabled));
-
-    /* outline */
-    --form-outline-label-color: hsla(var(--_contrast-color), var(--form-opacity--default));
-
-    --form-outline-border-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--default));
-    --form-outline-border--hover-color: hsla(var(--_contrast-color), var(--form-opacity--ouline--hover));
-
-    /* TEXT OPACITY */
-    --text-opacity--default: var(--_opacity--default);
-    --text-opacity----outline--default: 0.7;
-    --text-opacity--disabled: 0.5;
-
-    /* TEXT COLORS */
-    --text-primary-color: hsla(var(--_contrast-color), var(--text-opacity--default));
-    --text-outline-color: hsla(var(--_contrast-color), var(--text-opacity----outline--default));
-    --text-contrast-color: hsla(var(--_main-color), var(--text-opacity--default));
-    --text--disabled-color: hsla(var(--_contrast-color), var(--text-opacity--disabled));
-
-    /* CHAT COLORS */
-    --_chat-client-color: var(--_accent-color);
-    --_chat-client-opacity: 0.2;
-    --_chat-agent-color: var(--_secondary-color-50);
-    --_chat-agent-opacity: 1;
-
-    --chat-client-message-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
-    --chat-agent-message-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
-    --chat-client-attachment-bg-color: hsla(var(--_chat-client-color), var(--_chat-client-opacity));
-    --chat-agent-attachment-bg-color: hsla(var(--_chat-agent-color), var(--_chat-agent-opacity));
-}