Files
citrus-cms/template/assets/scss/components/_utilities.scss
T
2026-04-28 21:15:09 +03:00

103 lines
1.6 KiB
SCSS

//
// utilities.scss
// Theme component for utility classes (helper classes)
// text color on hover
.text-primary-hover {
a {
color: $gray-400;
&:hover {
color: $primary !important;
}
}
}
a.text-primary-hover, button.text-primary-hover {
color: $gray-400;
&:hover {
color: $primary !important;
}
}
.text-primary-hover {
li {
color: $gray-400;
&:hover {
color: $primary !important;
}
}
}
// font family
.font-base {
font-family: $font-family-base !important;
}
.font-heading {
font-family: $font-family-heading !important;
}
// Filter
.grayscale {
filter: grayscale(100%);
transition: all .6s ease;
&:hover {
filter: none;
-webkit-filter: grayscale(0%);
}
}
// On hover
.zoom-hover {
transform: scale(1);
&:hover {
transform: scale(1.2);
}
}
.up-hover {
transition: $transition-base;
&:hover {
transform: translateY(-10px);
}
}
// Icons fixed height and width
.icon-sm {
width: 1.5rem;
height: 1.5rem;
line-height: 1.5rem;
text-align: center;
font-size: 75%;
}
.icon-md {
width: 2.8rem;
height: 2.8rem;
line-height: 2.8rem;
text-align: center;
font-size: .8rem;
}
.icon-lg {
width: 3.5rem;
height: 3.5rem;
line-height: 3.5rem;
text-align: center;
font-size: 1.2rem;
}
.icon-xl {
width: 5rem;
height: 5rem;
line-height: 5rem;
text-align: center;
font-size: 1.9rem;
}
// oversized block for force outside of col width
@include media-breakpoint-up(lg) {
.oversized-block{
width: calc(100% + 140px - 20px + 140px - 20px);
margin-left: calc(-140px + 20px);
}
}