90 lines
1.6 KiB
SCSS
90 lines
1.6 KiB
SCSS
@import "../initial";
|
|
.marquee {
|
|
background:#ff0000;
|
|
font-size: 0.938em;
|
|
list-style:none;
|
|
margin: 0;
|
|
min-height: 1.875em;
|
|
overflow: hidden;
|
|
padding: 0.75em;
|
|
color: #fff;
|
|
li{
|
|
list-style:none;
|
|
}
|
|
a{
|
|
color: #fff;
|
|
}
|
|
&:before{
|
|
content: "\f0a1";
|
|
font-family: FontAwesome;
|
|
color: #FFEB3B;
|
|
font-size: 18px;
|
|
padding-right: 0.5em;
|
|
float: left;
|
|
}
|
|
}
|
|
.text_marqueewrapper{
|
|
z-index:1 ;
|
|
position: relative;
|
|
}
|
|
.marquee-1{
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
.marquee2 {
|
|
border-radius:2em;
|
|
background:#fff;
|
|
font-size: 0.938em;
|
|
list-style:none;
|
|
min-height: 1.875em;
|
|
overflow: hidden;
|
|
padding: 0.75em;
|
|
color: #333;
|
|
border: 1px solid #e5e7eb;
|
|
li{
|
|
list-style:none;
|
|
z-index: 1;
|
|
position: relative;
|
|
}
|
|
a{
|
|
color: #333;
|
|
}
|
|
&:before{
|
|
content: "\f0a1";
|
|
font-family: FontAwesome;
|
|
color: #bfc0c3;
|
|
font-size: 18px;
|
|
padding-right: 0.5em;
|
|
float: left;
|
|
z-index: 1;
|
|
}
|
|
&:after{
|
|
z-index: 0;
|
|
content: '';
|
|
position: absolute;
|
|
top: -100%;
|
|
left: -100%;
|
|
width: 200%;
|
|
height: 200%;
|
|
background: linear-gradient(
|
|
45deg,
|
|
rgba(255, 255, 255, 0) 30%,
|
|
#fff 50%,
|
|
rgba(255, 255, 255, 0) 70%
|
|
);
|
|
transform: translateX(-100%) rotate(0deg);
|
|
transition: all 1.2s ease;
|
|
pointer-events: none;
|
|
}
|
|
&:hover{
|
|
background: #e1e1e1;
|
|
border: 1px solid $theme-color-second;
|
|
&:before{
|
|
content: "\f0a1";
|
|
color:$theme-color-second;
|
|
}
|
|
&:after{
|
|
transform: translateX(100%) rotate(0deg);
|
|
}
|
|
}
|
|
} |