poa-dapps-voting/src/assets/stylesheets/components/_NetworkSelect.scss

102 lines
1.7 KiB
SCSS

.NetworkSelect {
display: flex;
@media (min-width: $breakpoint-md) {
position: relative;
margin-left: 34px;
&:hover {
.NetworkSelect_List {
display: block;
}
}
}
}
.sw-Header_Content .NetworkSelect {
display: none;
@media (min-width: $breakpoint-md) {
display: flex;
}
}
.NetworkSelect_Top {
display: flex;
align-items: center;
opacity: .7;
transition: .15s ease-in;
height: 50px;
width: 100%;
justify-content: center;
cursor: pointer;
&:hover {
opacity: 1;
@media (min-width: $breakpoint-md) {
.nl-IconNetwork_Arrow {
transform: rotate(180deg);
}
}
}
}
.nl-NavigationLinks_Link.opacityFull {
opacity: 1;
flex-direction: column;
height: auto !important;
}
.nl-IconNetwork_Arrow {
margin-left: 10px;
transition: .15s ease-in;
path {
fill: #fff;
opacity: .52;
}
}
.NetworkSelect_List {
font-size: 14px;
font-weight: 600;
list-style: none;
padding-left: 0;
width: 100%;
margin: 0;
@media (min-width: $breakpoint-md) {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: #fff;
width: 180px;
border-radius: 4px 0 4px 4px;
box-shadow: 0 5px 10px rgba(#000, .05);
padding-top: 8px;
padding-bottom: 8px;
}
li.currentNetwork {
@media (max-width: $breakpoint-md) {
display: none;
}
}
button {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
text-decoration: none;
color: #fff;
transition: .15s ease-in;
height: 50px;
background-color: transparent;
border: none;
cursor: pointer;
@media (min-width: $breakpoint-md) {
padding: 8px 18px;
height: auto;
color: $base-text-color;
justify-content: flex-start;
&:hover {
background-color: #f7f7f7;
}
}
}
}