105 lines
2.4 KiB
SCSS
105 lines
2.4 KiB
SCSS
$w-image-btn-text-font-size: $font-size-base !default;
|
|
$w-image-btn-text-line-height: 1.5 !default;
|
|
$w-image-btn-text-margin-bottom: .5rem !default;
|
|
$w-image-btn-text-rows: 3 !default;
|
|
//(#{$w-image-btn-text-rows + 1}) = 3 radky textu + "tlacitko"
|
|
$w-image-btn-text-hover-max-height: calc((#{$w-image-btn-text-font-size} * #{$w-image-btn-text-line-height} * (#{$w-image-btn-text-rows + 1})) + #{$w-image-btn-text-margin-bottom}) !default;
|
|
$w-image-btn-text-max-height: 0 !default;
|
|
|
|
.wpj-blocek.wpj-blocek-active {
|
|
.w-image-btn {
|
|
.w-image-btn-text-hover {
|
|
max-height: $w-image-btn-text-hover-max-height;
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-image-btn {
|
|
$w-image-btn-margin-bottom: 1rem !default;
|
|
|
|
display: flex;
|
|
align-items: flex-end;
|
|
position: relative;
|
|
line-height: $w-image-btn-text-line-height;
|
|
margin-bottom: $w-image-btn-margin-bottom;
|
|
border-radius: $border-radius-base;
|
|
overflow: hidden;
|
|
|
|
.w-figure {
|
|
margin: 0;
|
|
width: 100%;
|
|
|
|
img {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
.w-image-btn-text-hover {
|
|
max-height: $w-image-btn-text-hover-max-height;
|
|
}
|
|
|
|
|
|
.w-image-btn-title:last-child {
|
|
padding-bottom: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-image-btn-content {
|
|
$w-image-btn-padding: 20px !default;
|
|
$w-image-btn-color: #fff !default;
|
|
$w-image-btn-overlay: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 100%) !default;
|
|
|
|
color: $w-image-btn-color;
|
|
padding: $w-image-btn-padding;
|
|
position: absolute;
|
|
text-align: center;
|
|
width: 100%;
|
|
|
|
&::before {
|
|
content: "";
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: $w-image-btn-overlay;
|
|
z-index: 0;
|
|
}
|
|
|
|
> * {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.w-image-btn-title {
|
|
$w-image-btn-title-font-size: 20px !default;
|
|
$w-image-btn-title-font-weight: $font-weight-bold !default;
|
|
|
|
font-size: $w-image-btn-title-font-size;
|
|
font-weight: $w-image-btn-title-font-weight;
|
|
|
|
&:last-child {
|
|
transition: padding-bottom $transition-speed;
|
|
}
|
|
}
|
|
|
|
.w-image-btn-text-hover {
|
|
font-size: $w-image-btn-text-font-size;
|
|
max-height: $w-image-btn-text-max-height;
|
|
overflow: hidden;
|
|
transition: all $transition-speed;
|
|
}
|
|
|
|
.w-image-btn-text {
|
|
margin-bottom: $w-image-btn-text-margin-bottom;
|
|
overflow: hidden;
|
|
-webkit-line-clamp: 3;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|