diff --git a/src/styles/content.scss b/src/styles/content.scss index 539a5e4..cef4698 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -27,7 +27,6 @@ // skills #member-profile sib-display-lookuplist, -#profiles-list sib-display-lookuplist, sib-display-lookuplist { &[name$='skills'] { display: flex; @@ -124,11 +123,6 @@ sib-display-lookuplist { // } } -#profiles-list > div > sib-display { - cursor: pointer; -} - -#profiles-list > div > sib-display, sib-display#member-info { display: flex; flex-direction: column; @@ -228,48 +222,7 @@ hdapp-available { } } -#profiles-list { - @extend .grid-layer; - > sib-form { - grid-column-start: start; - grid-column-end: middle; - grid-row-start: start; - grid-row-end: middle; - } - > div { - grid-column-start: start; - grid-column-end: end; - grid-row-start: middle; - grid-row-end: end; - display: grid; - margin-top: 1em; - grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); - grid-gap: 1em; - } -} - -#profiles-list > sib-form > form { - display: grid; - grid-template-columns: 50% 50%; - grid-template-rows: 3.5em 3.5em; - - label { - flex-basis: 5em; - flex-shrink: 0; - } - - input, select { - flex-grow: 1; - min-width: 0; - } - - input[type="submit"] { - display: none; - } -} - -#member-profile, -#profiles-list { +#member-profile { ul { @include list-reset(); } diff --git a/src/styles/members.scss b/src/styles/members.scss index e69de29..eb49199 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -0,0 +1,168 @@ +#profiles-list sib-display-lookuplist { + &[name$='skills'] { + display: flex; + + li, + ul { + margin: 0; + padding: 0; + list-style: none; + } + + ul { + display: flex; + flex-wrap: wrap; + margin: 1em -0.25em; + } + + li { + padding: 0.3em 1.2em; + border: 1px solid; + border-radius: 2em; + margin: 0.25em; + background-color: $color-yellow; + color: $color-white; + font-weight: bold; + } + } +} + +#profiles-list > div > sib-display { + cursor: pointer; +} + +#profiles-list > div > sib-display { + display: flex; + flex-direction: column; + position: relative; + @extend %frame; + padding: 1em; + + label { + display: none; + } + + div[name='header'] { + border-bottom: 1px solid $color-grey-light; + padding-bottom: 1em; + padding: 0.5em; + margin-bottom: 1em; + display: flex; + flex-direction: column; + >*{ + display: flex; + justify-content: center; + flex-basis: content; + } + sib-display-img { + flex-basis:150px; + img { + border-radius: 100%; + width:150px; + } + } + } + + hdapp-userinfo { + @extend h1; + } + + [name=infos] { + margin: 2em 0; + + > * { + // display: block; + margin: 0.5em 0; + } + } + + ul[name$='roles'] * { + @include icon('user'); + } + + ul[name$='cell'] * { + @include icon('location-pin'); + } + [name$='user'] { + margin-bottom: 0em; + } + sib-display-div[name$='bio'] { + margin-top: 1em; + flex-basis : 5em; + } + + a[href^='mailto'] { + display: flex; + border-radius: 25px; + border-style: solid; + border-color: $color-blue-light; + color: $color-blue-light; + margin: 1em; + padding: 1em; + text-decoration:none; + } + + sib-display-tel { + display: block; + @include icon('phone'); + } + + hdapp-hyperlink { + display: block; + @include icon('link'); + } + + sib-display-div[name$='foaf:homepage'] * { + @include icon('link'); + } + sib-display-div[name$='more']{ + display: flex; + flex-direction: row-reverse; + } +} + +#profiles-list { + @extend .grid-layer; + > sib-form { + grid-column-start: start; + grid-column-end: middle; + grid-row-start: start; + grid-row-end: middle; + } + > div { + grid-column-start: start; + grid-column-end: end; + grid-row-start: middle; + grid-row-end: end; + display: grid; + margin-top: 1em; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + grid-gap: 1em; + } +} + +#profiles-list > sib-form > form { + display: grid; + grid-template-columns: 50% 50%; + grid-template-rows: 3.5em 3.5em; + + label { + flex-basis: 5em; + flex-shrink: 0; + } + + input, select { + flex-grow: 1; + min-width: 0; + } + + input[type="submit"] { + display: none; + } +} + +#profiles-list { + ul { + @include list-reset(); + } +}