@include add-breakpoint-prefixes {
&icon-size-1 {
height: $text-1 !important;
}
&icon-size-2 {
height: $text-2 !important;
}
&icon-size-3 {
height: $text-3 !important;
}
&icon-size-4 {
height: $text-4 !important;
}
&icon-size-5 {
height: $text-5 !important;
}
&icon-size-6 {
height: $text-6 !important;
}
&icon-size-7 {
height: $text-7 !important;
}
&icon-size-8 {
height: $text-8 !important;
}
&icon-size-9 {
height: $text-9 !important;
}
&icon-size-10 {
height: $text-10 !important;
}
&icon-size-11 {
height: $text-11 !important;
}
&icon-size-12 {
height: $text-12 !important;
}
&icon-size-13 {
height: $text-13 !important;
}
}
// DEPRECATED: Use SVGs inline with xs-icon-size-1 and xs-svgfill-red
%icon {
background-size: 100% !important;
display: inline-block !important;
}
.star-red {
@extend %icon;
background-image: svg-url('') !important;
width: 1.6rem !important;
height: 1.6rem !important;
}
.star-blue {
@extend %icon;
background-image: svg-url('') !important;
width: 1.6rem !important;
height: 1.6rem !important;
}
.star-gray {
@extend %icon;
background-image: svg-url('') !important;
width: 1.6rem !important;
height: 1.6rem !important;
}
.user {
@extend %icon;
background-image: svg-url('') !important;
width: 1.7rem !important;
height: 2.4rem !important;
}
.icon-tag {
@extend %icon;
background-image: svg-url('') !important;
width: 1.4rem !important;
height: 1.4rem !important;
}
.arrow-left {
@extend %icon;
background-image: svg-url('') !important;
width: 1rem !important;
height: 1.8rem !important;
}
.arrow-right {
@extend .arrow-left;
transform: rotate(180deg) !important;
}
.arrow-left--black {
@extend .arrow-left;
background-image: svg-url('') !important;
}
.arrow-right--black {
@extend .arrow-left--black;
transform: rotate(180deg) !important;
}
.arrow-left--gray {
@extend .arrow-left;
background-image: svg-url('') !important;
}
.arrow-right--gray {
@extend .arrow-left--gray;
transform: rotate(180deg) !important;
}
.arrow-left--white {
@extend .arrow-left;
background-image: svg-url('') !important;
}
.arrow-right--white {
@extend .arrow-left--white;
transform: rotate(180deg) !important;
}
$arrow-down: '';
$arrow-down--white: '';
.arrow-down {
@extend %icon;
background-image: svg-url($arrow-down) !important;
height: 0.6rem !important;
width: 1.1rem !important;
&--white {
background-image: svg-url($arrow-down--white) !important;
}
}
.arrow-up {
@extend .arrow-down;
transform: rotate(180deg) !important;
}
.loupe {
@extend %icon;
background-image: svg-url('') !important;
width: 2rem !important;
height: 2rem !important;
}
.loupe-gray {
@extend %icon;
background-image: svg-url('') !important;
width: 2rem !important;
height: 2rem !important;
&:hover {
background-image: svg-url('') !important;
}
&:focus {
background-image: svg-url('') !important;
}
}
.loupe-red {
@extend %icon;
background-image: svg-url('') !important;
width: 2rem !important;
height: 2rem !important;
}
.loupe-big {
@extend .loupe;
width: 3rem !important;
height: 3rem !important;
}
.burger {
@extend %icon;
background-image: svg-url('') !important;
width: 1.8rem !important;
height: 1.5rem !important;
}
.city {
@extend %icon;
background-image: svg-url('') !important;
width: 3rem !important;
height: 3rem !important;
}
.calendar {
@extend %icon;
background-image: svg-url('') !important;
width: 2rem !important;
height: 2.1rem !important;
}
.bookmark {
@extend %icon;
background-image: svg-url('') !important;
width: 1.4rem;
height: 2.1rem;
}
.plus {
@extend %icon;
background-image: svg-url('') !important;
width: 1.2rem !important;
height: 1.2rem !important;
}
.plus-red {
@extend %icon;
background-image: svg-url('') !important;
width: 1.2rem !important;
height: 1.2rem !important;
}
$tick: '';
.tick {
@extend %icon;
background-image: svg-url($tick) !important;
width: 1.3rem !important;
height: 1.2rem !important;
}
$close: '';
$close-black: '';
.close {
@extend %icon;
background-image: svg-url($close) !important;
width: 3rem !important;
height: 3rem !important;
&--black {
background-image: svg-url($close-black) !important;
}
}
$pound: '';
$pound--white: '';
.pound {
@extend %icon;
background-image: svg-url($pound) !important;
width: 0.9rem !important;
height: 1.5rem !important;
margin-right: 1px !important;
}
.checkbutton:checked + span > .pound {
background-image: svg-url($pound--white) !important;
}
// WIP loader
.loader,
.loader:after,
.loader:before {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: #ffffff;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
.loader:after,
.loader:before {
content: '';
position: absolute;
top: 0;
}
@-webkit-keyframes load7 {
0%,
100%,
80% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
100%,
80% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
$pin: '';
.pin {
@extend %icon;
background-image: svg-url($pin) !important;
width: 1.3rem !important;
height: 1.6rem !important;
}
$ribbon: '';
.ribbon {
@extend %icon;
background-image: svg-url($ribbon) !important;
width: 1.5rem !important;
height: 1.9rem !important;
}