Amir Mohamadi
98 lines
1.4 KiB
SCSS
98 lines
1.4 KiB
SCSS
%defaultTransition {
|
|
@include transition(0.3s);
|
|
}
|
|
|
|
%userSelect {
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
}
|
|
|
|
%appearance {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
|
|
%titleShape {
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
background: $red;
|
|
width: 40px;
|
|
height: 4px;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
@extend %defaultTransition;
|
|
}
|
|
|
|
&:lang(en) {
|
|
&::after {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
&::after {
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
%titleShapeCenter {
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
background: $red;
|
|
width: 50px;
|
|
height: 4px;
|
|
position: absolute;
|
|
left: calc(50% - 25px);
|
|
bottom: 0;
|
|
@extend %defaultTransition;
|
|
}
|
|
|
|
&.active {
|
|
&::after {
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
%imgBoxShape {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 80%;
|
|
height: 40px;
|
|
background: $theme;
|
|
position: absolute;
|
|
top: -30px;
|
|
right: 10%;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
%imgBoxShape-reverse {
|
|
&::before {
|
|
content: '';
|
|
display: block;
|
|
width: 80%;
|
|
height: 40px;
|
|
background: $theme;
|
|
position: absolute;
|
|
bottom: -30px;
|
|
left: 10%;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
|
|
%defaultBoxShadow {
|
|
@include boxShadow(0 0px 20px rgba(0, 0, 0, 0.2))
|
|
}
|