@itcase/ui 1.0.50 → 1.0.52

package/dist/components/Image.js

@@ -63,9 +63,17 @@ function Image(props) {
   });
   const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
-    propsKey: 'imageWidth'
+    propsKey: 'width'
   });
   const heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'height_',
+    propsKey: 'height'
+  });
+  const imageWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'imageWidth'
+  });
+  const imageHeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'height_',
     propsKey: 'imageHeight'
   });
@@ -86,7 +94,7 @@ function Image(props) {
     image: imageStyles
   } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'image', type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, resizeModeClass),
+    className: clsx__default.default(className, 'image', type && `image_type_${type}`, cursorClass, horizontalAlignClass, verticalAlignClass, shapeClass, resizeModeClass, widthClass, heightClass),
     onClick: onClick,
     style: styles
   }, before, /*#__PURE__*/React__default.default.createElement("div", {
@@ -97,7 +105,7 @@ function Image(props) {
     alt: alt,
     title: title,
     style: imageStyles,
-    className: clsx__default.default('image__item', widthClass, heightClass, imageClassName, borderClass, borderColorImageClass),
+    className: clsx__default.default('image__item', imageWidthClass, imageHeightClass, imageClassName, borderClass, borderColorImageClass),
     onError: onError
   }), overlay, caption, children), after);
 }

package/dist/components/Modal.js

@@ -201,7 +201,9 @@ const Modal = /*#__PURE__*/React__default.default.forwardRef(function Modal(prop
   }, closeButton && /*#__PURE__*/React__default.default.createElement("div", {
     className: "modal-content__close",
     onClick: closeModal
-  }, closeButton), children), /*#__PURE__*/React__default.default.createElement(index.Fader, {
+  }, closeButton), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "modal-content__wrapper"
+  }, children)), /*#__PURE__*/React__default.default.createElement(index.Fader, {
     ref: modalFaderRef,
     fill: faderFill,
     fillGradient: faderFillGradient,

package/dist/components/Text.js

@@ -63,7 +63,7 @@ function Text(props) {
     propsKey: 'textColorActive'
   });
   const textColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'text-color_hover_',
+    prefix: 'text-color-hover_',
     propsKey: 'textColorHover'
   });
   const textGradientClass = useDeviceTargetClass.useDeviceTargetClass(props, {

package/dist/css/components/Image/Image.css

@@ -1,8 +1,9 @@
 .image {
   font-size: 0;
   &__wrapper {
-    position: relative;
+    width: 100%;
     font-size: 0;
+    position: relative;
   }
 }
 .image {
@@ -22,6 +23,7 @@
       > ^^&__wrapper {
         & > ^^^&__item {
           width: 100%;
+          height: 100%;
           object-fit: cover;
         }
       }
@@ -30,6 +32,7 @@
       > ^^&__wrapper {
         & > ^^^&__item {
           width: 100%;
+          height: 100%;
           object-fit: contain;
         }
       }

package/dist/css/components/Modal/Modal.css

@@ -27,12 +27,12 @@
   width: 100%;
   min-width: 200px;
   min-height: 200px;
-  max-width: var(--modal-max-width, 800px);
+  max-width: var(--modal-max-width, 1200px);
   position: relative;
   &:focus {
     outline: 0;
   }
-  &__inner {
+  &__wrapper {
     width: 100%;
   }
 }

package/dist/css/components/Swiper/Swiper.css

@@ -904,8 +904,9 @@ div.swiper-block__item {
   }
 }
 
-.swiper-block {
+div.swiper-block {
   width: 100%;
+  max-width: 100%;
 }
 
 div.swiper-pagination {

package/dist/css/styles/text-color/text-color.css

@@ -11,3 +11,4 @@
     }
   }
 }
+

package/dist/css/styles/text-color-hover/text-color-hover.css

@@ -7,6 +7,11 @@
             &:hover {
               color: var(--color-$(type)-text-$(color));
             }
+            &-hover {
+              &:hover {
+                color: var(--color-$(type)-text-$(color)-hover);
+              }
+            }
           }
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.0.50",
+  "version": "1.0.52",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",

package/dist/css/styles/text-color/text-color_hover.css

@@ -1,17 +0,0 @@
-.text-color {
-  &_hover {
-    @each $type in accent, primary, secondary, tertiary, surface, success, error, info, warning {
-      &_$(type) {
-        &-text {
-          @each $color in primary, secondary, tertiary, quaternary, quinary, senary, accent, disabled, hover  {
-            &-$(color) {
-              &:hover {
-                color: var(--color-$(type)-text-$(color));
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}