105 lines
2.3 KiB
SCSS
Executable File
105 lines
2.3 KiB
SCSS
Executable File
/*------------------------------------------------------------------
|
|
[Work]
|
|
------------------------------------------------------------------*/
|
|
|
|
/* Overlay */
|
|
.work {
|
|
@include position(relative);
|
|
display: block;
|
|
|
|
.work-overlay {
|
|
@include position(relative);
|
|
cursor: pointer;
|
|
|
|
&:before {
|
|
@include position(absolute, $top: 0, $left: 0);
|
|
@include size(100%);
|
|
@include bg-opacity(#000, 0);
|
|
content: " ";
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.work-overlay {
|
|
&:before {
|
|
@include bg-opacity(#000, .5);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Popup */
|
|
.work {
|
|
.work-popup {
|
|
&-overlay {
|
|
@include position(fixed, $top: 0, $left: 0, $right: 0);
|
|
@include size(100%);
|
|
z-index: 99999;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
@include visibility-backface(hidden);
|
|
overflow-x: hidden;
|
|
@include bg-opacity($color-heading, .4);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
|
|
&-show {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
@include visibility-backface(visible);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
|
|
&-content {
|
|
@include position(absolute, $top: 50%, $left: 0, $right: 0);
|
|
@include size(730px, auto);
|
|
display: block;
|
|
background: $color-white;
|
|
padding: 30px;
|
|
margin: 0 auto;
|
|
@include translate3d(0,-50%,0);
|
|
|
|
&-divider {
|
|
border-right: 1px solid lighten($color-subtitle, 15%);
|
|
}
|
|
|
|
@media (max-width: $screen-sm-min) {
|
|
width: 95%;
|
|
|
|
&-divider {
|
|
border-right: none;
|
|
border-bottom: 1px solid lighten($color-subtitle, 15%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-close {
|
|
float: right;
|
|
@include font($size: 13px, $weight: 700);
|
|
color: lighten($color-link, 25%);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
|
|
&:hover {
|
|
color: lighten($color-link, 15%);
|
|
@include cubic-transition($delay: 0, $duration: 300ms, $property: (all));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Tag */
|
|
.work {
|
|
.work-popup-tag {
|
|
margin: 0;
|
|
|
|
&-item {
|
|
padding: 0 2px;
|
|
}
|
|
|
|
&-link {
|
|
@include font($size: 13px);
|
|
}
|
|
}
|
|
} |