103 lines
1.6 KiB
SCSS
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);
|
|
}
|
|
}
|