small fix

src/components/BaseButton/BaseButton.stories.ts

@@ -143,7 +143,7 @@ export const StyleVariables: StoryFn = {
         $base-button-font-weight: 800
         $base-button-line-height: 21px
         $base-button-color: $white
-        $base-button-min-height: 37px
+        $base-button-height: 37px
         $base-button-padding: 0 16px
         $base-button-icon-margin: 6px
         $base-button-pill: 30px
@@ -152,17 +152,17 @@ export const StyleVariables: StoryFn = {
         $base-button-box-shadow: 0px 3px 4px -2px rgba(18, 22, 31, 0.15)
         $base-button-icon-only-size: 38px
         
-        $base-button-large-min-height: 45px
+        $base-button-large-height: 45px
         $base-button-large-padding: 0 20px
         $base-button-icon-only-large-size: 48px
         
-        $base-button-small-min-height: 32px
+        $base-button-small-height: 32px
         $base-button-small-padding: 0 12px
         $base-button-small-font-size: 14px
         $base-button-icon-only-small-size: 30px
         
         $base-button-x-small-padding: 0 6px
-        $base-button-x-small-min-height: 26px
+        $base-button-x-small-height: 26px
         
         $base-button-icon-only-padding: 9px
         $base-button-icon-only-small-padding: 7px

src/components/BaseButton/BaseButton.vue

@@ -62,7 +62,7 @@
 	font-family: $base-button-font-family
 	line-height: $base-button-line-height
 	font-weight: $base-button-font-weight
-	min-height: $base-button-min-height
+	height: $base-button-height
 	color: $base-button-color
 	background-color: transparent
 	border-radius: $base-button-border-radius
@@ -113,16 +113,16 @@
 		opacity: 0.3
 		pointer-events: none
 	&.is--size-large
-		min-height: $base-button-large-min-height
+		height: $base-button-large-height
 		padding: $base-button-large-padding
 		font-size: $base-button-large-font-size
 		line-height: $base-button-large-line-height
 	&.is--size-small
-		min-height: $base-button-small-min-height
+		height: $base-button-small-height
 		padding: $base-button-small-padding
 		font-size: $base-button-small-font-size
 	&.is--size-x-small
-		min-height: $base-button-x-small-min-height
+		height: $base-button-x-small-height
 		padding: $base-button-x-small-padding
 	&.is--bg-color-primary
 		background-color: $base-button-primary-color

src/components/BaseButton/index.sass

@@ -6,28 +6,28 @@ $base-button-font-weight: 700
 $base-button-line-height: 21px
 $base-button-color: $white
 $base-button-hover-color: $white
-$base-button-min-height: 40px
-$base-button-padding: 8px 16px
+$base-button-height: 40px
+$base-button-padding: 0 16px
 $base-button-icon-margin: 4px
 $base-button-pill: 30px
 $base-button-border-radius: 2px
 $base-button-border-width: 1px
 $base-button-box-shadow: 0px 2px 5px 1px rgba(18, 22, 31, 0.03), 0px 2px 3px -2px rgba(18, 22, 31, 0.15)
 $base-button-icon-only-size: 40px
 
-$base-button-large-min-height: 48px
-$base-button-large-padding: 12px 20px
+$base-button-large-height: 48px
+$base-button-large-padding: 0 20px
 $base-button-icon-only-large-size: 48px
 $base-button-large-font-size: 16px
 $base-button-large-line-height: 26px
 
-$base-button-small-min-height: 32px
-$base-button-small-padding: 6px 12px
+$base-button-small-height: 32px
+$base-button-small-padding: 0 12px
 $base-button-small-font-size: 12px
 $base-button-icon-only-small-size: 32px
 
 $base-button-x-small-padding: 0 6px
-$base-button-x-small-min-height: 26px
+$base-button-x-small-height: 26px
 
 $base-button-icon-only-padding: 9px
 $base-button-icon-only-small-padding: 7px

src/components/BaseCardFeatures/BaseCardFeatures.vue

@@ -18,27 +18,31 @@
     class="BaseCardFeatures base-card-features is--hover-elevate-up is--hover-visible-elevate-up-wrapper"
   >
     <div class="base-card-features__card">
-        <slot />
+        <div class="base-card-features__content is--hover-visible-elevate-up-content">
+          <slot />
 
-        <BaseButton
-          v-if="buttonText"
-          icon-placement="right"
-          size="small"
-          variant="link"
-          class="is--hover-visible-elevate-up-component is--no-margin"
-        >
-          {{ buttonText}}
-          <BaseSvgIcon
-            name="arrow-right"
-          />
-        </BaseButton>
+          <BaseButton
+            v-if="buttonText"
+            icon-placement="right"
+            size="small"
+            variant="link"
+            class="base-card-features__button is--hover-visible-elevate-up-component is--no-margin"
+          >
+            {{ buttonText}}
+            <BaseSvgIcon
+              name="arrow-right"
+            />
+          </BaseButton>
+        </div>
     </div>
   </component>
 </template>
 
 <style lang="sass" scoped>
 @import 'index.sass'
 .base-card-features
+  $root: &
+
   padding: 8px
   border-radius: 2px
   background: $white
@@ -68,4 +72,17 @@
     align-self: stretch
     border-radius: 2px
     background: $primary-light
+    #{$root}:hover &
+      padding-bottom: 36px
+
+  &__content
+    position: relative
+
+  &__button
+    position: absolute
+    bottom: -40px
+    left: 0
+    right: 0
+    display: block
+    margin: 0 auto
 </style>

src/components/BaseCarousel/BaseCarousel.vue

@@ -166,12 +166,12 @@ const onClick = () => {
 
 
 <style lang="sass">
-@import 'UiKit/styles/_colors.sass'
+@import 'index.sass'
 .base-carousel
   height: 100%
   width: 100%
   user-select: none
-  background-color: $gray-10
+  background-color: $base-carousel-background-color
 
   .base-carousel__slider-main,
   .base-carousel__slider-thumbs
@@ -181,7 +181,7 @@ const onClick = () => {
     position: relative
 
   .base-carousel__slider-main
-    height: 80%
+    height: $base-carousel-main-height
     width: 100%
 
     .swiper-slide
@@ -204,14 +204,14 @@ const onClick = () => {
         display: block
         width: 100%
       .is--default-image
-        max-height: 40%
+        max-height: $base-carousel-main-default-image-height
 
   .base-carousel__slider-thumbs
-    height: 20%
+    height: $base-carousel-thumbs-height
     padding: 10px 0 0
     .swiper-slide
       height: 100%
-      opacity: 0.4
+      opacity: $base-carousel-thumbs-opacity
       transition: all 0.3s ease
       &:hover, .swiper-slide-thumb-active
         filter: none
@@ -236,8 +236,8 @@ const onClick = () => {
     right: 0
     top: 50%
     transform: translateY(-50%)
-    width: 48px
-    height: 48px
+    width: $base-carousel-navigation-width
+    height: $base-carousel-navigation-height
     z-index: 2
     cursor: pointer
     padding: 12px

src/components/BaseCarousel/index.sass

@@ -1 +1,9 @@
 @import 'UiKit/styles/_colors.sass'
+
+$base-carousel-background-color: $gray-10
+$base-carousel-main-height: 80%
+$base-carousel-main-default-image-height: 40%
+$base-carousel-thumbs-height: 20%
+$base-carousel-thumbs-opacity: 0.4
+$base-carousel-navigation-height: 48px
+$base-carousel-navigation-width: 48px

src/components/BaseImage/BaseImage.vue

@@ -1,14 +1,16 @@
 <script lang="ts" setup>
 import BaseSkeleton from 'UiKit/components/BaseSkeleton/BaseSkeleton.vue';
 import defaulImage from 'UiKit/assets/default.svg?url';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 
 const props = withDefaults(defineProps<{
     src: string | undefined,
     alt: string,
 	fit?: 'cover' | 'contain' | 'inherit'
+	loading?: 'lazy' | 'eager' | undefined,
 }>(), {
 	fit: 'cover',
+	loading: 'eager',
 });
 
 const isImageLoaded = ref<Boolean>(false)
@@ -17,6 +19,9 @@ const onImageLoaded = () => {
     isImageLoaded.value = true
   }, 200)
 }
+const showImage = computed(() => {
+	return isImageLoaded.value || (props.loading === 'lazy')
+});
 </script>
 
 <template>
@@ -25,17 +30,17 @@ const onImageLoaded = () => {
 		:class="[`is--${fit}`, { 'is--bg': !src }]"
 	>
 		<BaseSkeleton
-			v-show="!isImageLoaded"
+			v-show="!showImage"
 			height="100%"
 			width="100%"
 			class="base-image__skeleton"
 		/>
 		<img
-			v-show="isImageLoaded"
+			v-show="showImage"
 			:src="src || defaulImage"
 			:alt="alt"
 			:key="src"
-            loading="lazy"
+            :loading="loading"
 			class="base-image__image"
             :class="[`is--${fit}`, { 'is--default-image': !src }]"
 			@load="onImageLoaded"

src/styles/components/_hover.sass

@@ -6,18 +6,23 @@
         will-change: transform
 
 .is--hover-visible-elevate-up-wrapper // use on wrapper
-    transition: transform .3s ease
+    *
+        transition: all 0.3 ease
     &:hover
         .is--hover-visible-elevate-up-component
+            transform: translateY(0px)
             opacity: 1
-            visibility: visible
-            display: inherit !important
+
+        .is--hover-visible-elevate-up-content // use on content that moves
+            transform: translateY(-10px)
             transition: transform .3s ease
+            will-change: transform
 
 
 .is--hover-visible-elevate-up-component // use on element that appears
     opacity: 0
-    visibility: hidden
-    display: none !important
-    transition: all 0.3s ease
-    margin-top: 8px
+    transform: translateY(30px)
+
+.is--hover-visible-elevate-up-content // use on content that moves
+    transition: transform .3s ease
+    will-change: transform

src/styles/components/index.sass

@@ -5,6 +5,7 @@
 @import './_button.sass'    
 @import './_typography.sass'
 @import './_card.sass'
+@import './_carousel.sass'    
 @import './_code.sass'
 @import './_custom-block.sass'
 @import './_hover.sass'