Skip to content
Snippets Groups Projects
Commit 912a1340 authored by Alexandre Bourlier's avatar Alexandre Bourlier
Browse files

Menu, Member list and Member detail pages made responsive

parent 53048800
No related branches found
No related tags found
No related merge requests found
...@@ -82,3 +82,15 @@ ...@@ -82,3 +82,15 @@
} }
} }
} }
@media (min-width: $sm-with) {
#member-detail {
#member-info {
ldp-display-img {
display: block;
float: right;
width: 300px;
}
}
}
}
...@@ -2,19 +2,64 @@ ...@@ -2,19 +2,64 @@
ldp-form { ldp-form {
background-color: #F3F3F3; background-color: #F3F3F3;
} }
ldp-display {
display: block;
margin-top: 40px;
}
} }
@media (min-width: 576px) { @media (min-width: $md-with) {
#profilesList { #profiles-list {
display: flex; display: flex;
justify-content: space-between; flex-wrap: wrap;
justify-content: center;
ldp-form {
flex-basis: 100%;
}
ldp-display { ldp-display {
cursor: pointer;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
&, img { &, img {
width: 250px; width: 250px;
max-width: initial; max-width: initial;
min-width: initial; min-width: initial;
} }
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform .3s ease-out 0s;
background: rgba(255, 255, 255, .075);
content: '';
pointer-events: none;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
}
}
} }
} }
} }
...@@ -30,6 +30,10 @@ ...@@ -30,6 +30,10 @@
border-bottom: 2px solid $hd-color; border-bottom: 2px solid $hd-color;
color: $hd-color; color: $hd-color;
} }
ldp-route:hover {
border-bottom: 2px solid $hd-color;
}
} }
} }
...@@ -50,12 +54,19 @@ ...@@ -50,12 +54,19 @@
ldp-route { ldp-route {
text-align: center; text-align: center;
cursor: pointer;
padding: 6px 0px; padding: 6px 0px;
margin-bottom: 2px;
border-left: 2px solid transparent;
&[active] { &[active] {
border-left: 2px solid $hd-color; border-left: 2px solid $hd-color;
color: $hd-color; color: $hd-color;
} }
&:hover {
border-left: 2px solid $hd-color;
}
} }
} }
......
...@@ -4,3 +4,5 @@ $twitter-color: #1DA1F2; ...@@ -4,3 +4,5 @@ $twitter-color: #1DA1F2;
$menu-height: 46px; $menu-height: 46px;
$menu-font-size: 17px; $menu-font-size: 17px;
$vertical-menu-width: 50px; $vertical-menu-width: 50px;
$sm-with: 576px;
$md-with: 768px;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment