116 lines
2.3 KiB
SCSS
116 lines
2.3 KiB
SCSS
@import "../initial";
|
|
.marquee-title{
|
|
margin: 0;
|
|
float: left;
|
|
display: inline-block;
|
|
width: 110px;
|
|
font-size:1.3em;
|
|
line-height: 30px;
|
|
color: #ffa200;
|
|
text-align: center;
|
|
padding: 15px 10px 15px 2px;
|
|
clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
|
|
background: #184879;
|
|
}
|
|
.marquee-wrapper{
|
|
padding: 1em;
|
|
position: relative;
|
|
}
|
|
.marquee {
|
|
@media(max-width:$screen-xs){
|
|
font-size: 1em;
|
|
}
|
|
font-size: 1.3em;
|
|
list-style:none;
|
|
margin: 0;
|
|
min-height: 1.875em;
|
|
color: $theme-color-hover;
|
|
float: left;
|
|
width: calc(100% - 110px);
|
|
display: inline-block;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding:15px 20px;
|
|
vertical-align: middle;
|
|
clip-path: polygon(0 0, 100% 0, 100% 100%, 10px 100%);
|
|
background: #e2eaf3;
|
|
li{
|
|
list-style:none;
|
|
}
|
|
a{
|
|
color: #184879;
|
|
}
|
|
// &:before{
|
|
// content: "\f0a1";
|
|
// font-family: FontAwesome;
|
|
// color: #FFEB3B;
|
|
// font-size: 18px;
|
|
// padding-right: 0.5em;
|
|
// float: left;
|
|
// }
|
|
}
|
|
.marquee-1{
|
|
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);
|
|
}
|
|
}
|
|
} |