@mixin fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@mixin reset-btn {
display: inline-block;
padding: 0;
background: none;
border: 0;
cursor: pointer;
}
@mixin reset-margins {
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
@mixin position-middle {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
@mixin hide-scrollbar {
/* Hide scrollbar for IE, Edge and Firefox */
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
/* Hide scrollbar for Chrome, Safari and Opera */
&::-webkit-scrollbar {
display: none;
}
}
@mixin text-gradient {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.text-center {
text-align: center;
}
.text-uppercase {
text-transform: uppercase;
}
.text-white {
color: #fff;
}
.d-block {
display: block !important;
}
.d-none {
display: block !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mt-0 {
margin-top: 0 !important;
}
.w-100 {
width: 100%;
}
.link-area {
@include fill;
}
.nice-link {
background-image: linear-gradient(currentColor,currentColor);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 0 1px;
transition: background-size .25s ease-out,color .2s;
&:hover {
background-size: 100% 1px;
}
&--active {
background-size: 100% 1px;
&:hover {
background-size: 0 1px;
}
}
}
.edge-overlay {
width: 10%;
max-width: 70px;
position: absolute;
z-index: 10;
top: 0;
left: 0;
height: 100%;
display: none;
pointer-events: none;
&.active {
display: block;
}
&--l {
background: linear-gradient(to right, #fff, rgba(#fff, 0));
}
&--r {
background: linear-gradient(to left, #fff, rgba(#fff, 0));
left: auto;
right: 0;
}
}
Рубрики: заметки
0 комментариев