2
0
mirror of https://github.com/tenrok/vue-form-wizard.git synced 2026-06-08 13:42:24 +03:00
Files
vue-form-wizard/src/assets/tab-wizard/_navs-pagination.scss
T
2017-04-16 12:58:51 +03:00

86 lines
1.7 KiB
SCSS

.nav-pills {
position: relative;
top: 40px;
text-align: center;
display:flex;
flex-wrap:wrap;
li,a{
flex:1;
align-items: center;
flex-wrap:wrap;
flex-grow: 1;
}
a{
display:flex;
}
> li + li {
margin-left: 0;
}
> li > a {
padding: 0;
max-width: 78px;
margin: 0 auto;
color: $form-placeholder-color;
border-radius: 50%;
position: relative;
top: -32px;
z-index: 100;
&:after{
content: '';
width: 70px;
height: 70px;
border-radius: 50%;
display: inline-block;
position: absolute;
right: -1px;
top: -4px;
transform: scale(0);
transition: .2s all linear;
}
&:hover,
&:focus{
background-color: transparent;
color: $form-placeholder-color;
outline: 0 !important;
cursor: pointer;
}
}
> li.active > a{
&:after{
content: '';
width: 70px;
height: 70px;
border-radius: 50%;
display: inline-block;
position: absolute;
right: 5px;
top: -2px;
@include scale(1);
@include transition(.2s, linear);
}
}
> li.active > a,
> li.active > a:hover,
> li.active > a:focus {
background-color: transparent;
font-size: 15px;
@include transition-font-size(.2s, linear);
[class*="ti-"]{
color: $white-color;
font-size: 24px;
top: 21px;
@include transition(.2s, linear);
}
}
}