funky-framadate-front/src/styles/partials/_navigation.scss

92 lines
1.3 KiB
SCSS

nav {
text-align: center;
margin-bottom: 3.2rem;
padding-top: 1.6rem;
padding-bottom: 1.6rem;
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
a {
&::before {
display: inline-block;
position: relative;
width: auto;
background: none;
}
&::after {
display: none;
}
&.active,
&.is-active {
color: $white;
background: $primary_color;
}
}
}
a {
color: $primary_color;
&,
&:hover {
text-decoration: none;
}
&::before,
&::after {
content: '';
}
&.next::before,
&.prev::after {
position: absolute;
top: 0;
bottom: 0;
display: block;
width: 100%;
height: 0.6rem;
margin: auto;
background-color: $secondary_color;
z-index: -1;
}
&.next::after,
&.prev::before {
display: inline-block;
width: 1rem;
height: 1rem;
border-bottom: 2px solid #000;
}
&.next::after {
margin-right: 1rem;
border-right: 2px solid #000;
transform: rotate(-45deg);
}
&.prev::before {
margin-left: 1rem;
border-left: 2px solid #000;
transform: rotate(45deg);
}
&:hover {
&.next::before,
&.prev::after {
background-color: rgba($primary_color, 0.7);
}
}
span {
padding-right: 1rem;
padding-left: 1rem;
}
}
// material override
.navbar {
margin-bottom: 0;
}
a span.ui-steps-number {
padding: 0;
}