@warp-ds/component-classes - npm Package Compare versions

Comparing version 1.0.0-alpha.73 to 1.0.0-alpha.74

index.js

@@ -52,20 +52,2 @@ export const attention = {
 
-export const modal = {
-  backdrop:
-    'f-modal-backdrop fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20',
-  modal:
-    'f-modal rounded-8 mx-0 sm:mx-16 bg-white flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
-  content:
-    'block overflow-y-auto overflow-x-hidden last:mb-0 flex-grow flex-shrink px-16 sm:px-32 relative',
-  footer: 'flex justify-end flex-shrink-0 px-16 sm:px-32',
-  transitionTitle: 'transition-all duration-300',
-  title:
-    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid f-grid gap-8 sm:gap-16 f-modal-title items-center px-16 sm:px-32 border-b sm:border-b-0 flex-shrink-0',
-  titleText: 'mb-0 h4 sm:h3',
-  titleButton: 'button button--pill f-modal-title-button',
-  titleButtonLeft: '-ml-8 sm:-ml-12',
-  titleButtonRight: '-mr-8 sm:-mr-12',
-  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',
-};
-
 export const box = {
@@ -290,2 +272,22 @@ box: 'group block relative break-words last:mb-0 p-16 rounded-8', // Relative here enables w-clickable
 
+export const modal = {
+  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
+  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[''] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
+  backdrop:
+    'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-20',
+  modal:
+    'sm:pb-safe i-shadow-$shadow-modal w-[640px] max-h-4/5 relative transition-300 backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
+  content:
+    'block overflow-y-auto overflow-x-hidden last:mb-0 flex-grow flex-shrink px-16 sm:px-32 relative',
+  footer: 'flex justify-end flex-shrink-0 px-16 sm:px-32',
+  transitionTitle: 'transition-all duration-300',
+  title:
+    '-mt-4 sm:-mt-8 h-40 sm:h-48 grid f-grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 flex-shrink-0',
+  titleText: 'mb-0 h4 sm:h3',
+  titleButton: button.buttonPill + 'sm:min-h-[32px] sm:min-w-[32px]',
+  titleButtonLeft: '-ml-8 sm:-ml-12',
+  titleButtonRight: '-mr-8 sm:-mr-12',
+  titleButtonIcon: 'h-16 w-16 sm:h-24 sm:w-24',
+};
+
 export const alert = {
@@ -292,0 +294,0 @@ alert: "flex p-16 border border-l-4 rounded-4",

package.json

 {
   "name": "@warp-ds/component-classes",
   "repository": "[e-mail]:warp-ds/component-classes.git",
-  "version": "1.0.0-alpha.73",
+  "version": "1.0.0-alpha.74",
   "description": "WARP component classes",
@@ -6,0 +6,0 @@ "type": "module",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

77490

increased by1.54%

Lines of code

538

increased by0.94%

No dependency changes