autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Clément
2018-10-05 11:37:48 +02:00
parent 72a47b9cb6
commit 51ccde0c0e
36 changed files with 328 additions and 369 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/styles/content.scss
View File

@ -1,6 +1,7 @@
// job offers
#offers-list {
> div {
display: none;
> sib-display {
display: block;
margin: 1em 0;
@ -10,88 +11,66 @@
&:nth-child(odd) {
background-color: $color-white;
}
}
}
}
// members
%member {
display: grid;
margin-top: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
label {
display: none;
}
> sib-display {
display: block;
position: relative;
background-color: $color-white;
@extend %shadow;
padding: 0.5em;
cursor: pointer;
&::before,
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: scale3d(0, 0, 1);
transition: transform 0.3s ease-out 0s;
background: #eac1;
content: '';
pointer-events: none;
}
&::before {
transform-origin: left top;
}
&::after {
transform-origin: right bottom;
background: #ace1;
}
&:hover,
&:focus {
&::before,
&::after {
transform: scale3d(1, 1, 1);
sib-display-div[name=title]{
display: block;
@extend h1;
background-color: red;
}
}
}
}
#profiles-list {
display: block;
sib-form {
display: block;
input[type='reset'] {
display: none;
}
}
div[name='header'] {
border-top: 2em solid $color-grey-light;
border-bottom: 1px solid $color-grey-light;
padding-bottom: 1em;
margin-bottom: 1em;
text-align: center;
}
// chat
> div {
@extend %member;
.chat-view {
padding: 1em;
border: 1px dashed green;
position: relative;
min-height: 300px;
> sib-chat {
@include pos();
}
}
.members-list-condensed {
display: block;
img {
width: 50px;
height: 50px;
border-radius: 100%;
object-fit: cover;
object-position: top;
}
label {
display: none;
}
> div > sib-display > div {
display: flex;
}
ul {
padding-left: 1em;
}
}
// member-profile && member
sib-display#member-info,
#profiles-list>div>sib-display{
display: block;
position: relative;
background-color: $color-white;
@extend %shadow;
padding: 1em;
cursor: pointer;
sib-display-img {
$width: 55%;
display: block;
position: relative;
width: 80%;
width: $width;
padding-bottom: $width;
height: 0;
padding-bottom: 80%;
margin: 10%;
margin: 2em auto;
img {
display: block;
position: absolute;
@ -102,45 +81,15 @@
object-position: center;
}
}
}
hdapp-userinfo {
display: block;
color: $color-black;
font-size: 1.1em;
margin: 0.5em;
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
}
div[name='pseudonym'] {
font-size: 0.8em;
div {
display: inline;
}
}
}
sib-display-lookuplist[name='skills'] {
ul,
li {
display: block;
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
flex-wrap: wrap;
margin: 0 -0.25em;
}
li {
padding: 0.5em 1em;
border: 1px solid;
border-radius: 0.25em;
margin: 0.25em;
#profiles-list {
display: block;
> div {
display: grid;
margin-top: 1em;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 1em;
}
}

1
src/styles/functions.scss
View File

@ -0,0 +1 @@
//

6
src/styles/icons.scss
View File

@ -258,6 +258,8 @@ $icons: (
}
}
@mixin icon($code) {
@extend %icon;
@extend .icon-#{$code};
&:before {
@extend %icon;
@extend .icon-#{$code};
}
}

7
src/styles/index.scss
View File

@ -1,9 +1,14 @@
@charset "UTF-8";
@import 'functions';
@import '../../node_modules/include-media/dist/include-media';
@import 'icons';
@import 'variables';
@import 'functions';
@import 'mixins';
@import 'main';
@import 'form';
@import 'content';
@import 'members';
@import 'menu';

156
src/styles/main.scss
View File

@ -11,21 +11,83 @@ html {
color: $color-grey;
}
html,
body {
height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
font-weight: 600;
margin: 0.67em 0;
span {
font-weight: 400;
padding-left: 0.5em;
&:before {
content: '// ';
}
}
}
h1 {
font-size: 1.23em;
}
h2 {
font-size: 1.16em;
}
h3 {
font-size: 1.12em;
}
.debug {
outline: 2px dotted red;
}
#header {
background-color: $color-white;
color: $color-black;
position: relative;
@include border-shadow(bottom);
border: solid $color-white;
border-width: 1px 0;
display: flex;
align-items: center;
padding: 1em 0;
> * {
padding: 0 1rem;
}
}
#button-toggle {
@include icon('menu');
display: none;
color: $color-black;
font-size: 2em;
padding: 0.72em;
cursor: pointer;
}
#logo {
margin: 1.4em;
flex: 1 1 0px;
}
html,
body {
height: 100%;
#notification {
@include icon(bell);
font-size: 1.5em;
}
#profile {
> * {
vertical-align: middle;
}
img {
margin-right: 0.5em;
}
}
#subContainer {
@ -37,25 +99,79 @@ body {
flex: 1 1 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: $color-black;
.limiter{
display: block;
max-width: 650px;
}
/* sub menu (right menu) */
h1{
font-size: 1.23em;
span{
font-weight: normal;
#mainContainer > div {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
display: block;
background-color: #ccc;
sib-route {
display: block;
> div {
position: relative;
padding: 1em 2em;
border-bottom: 1px solid #888;
}
&[active] {
font-weight: bold;
> div:before {
content: '<';
position: absolute;
transform: translateX(-150%);
}
}
}
}
> div {
margin: 2.6em;
flex: 1 1 0px;
}
}
h2{
font-size: 1.16em;
}
h3{
font-size: 1.12em;
#search-bar > div {
position: relative;
}
#search-icon {
pointer-events: none;
}
#search-icon,
#close-search-icon {
position: absolute;
right: 0.4em;
top: 50%;
transform: translateY(-50%);
margin: auto;
display: block;
}
#search-input {
-webkit-appearance: textfield;
border-radius: 10em;
padding: 0.4em 0.8em;
border: 1px solid $color-grey;
& ~ #close-search-icon {
opacity: 0;
}
&:focus {
& ~ #close-search-icon {
opacity: 1;
}
& ~ #search-icon {
visibility: hidden;
}
}
}
sib-trigger.back {
display: block;
@include icon('arrow-left');
@extend h1;
}

52
src/styles/menu.scss
View File

@ -1,19 +1,6 @@
// #navbar{}
// #navbar-router{}
.btn-toggle {
@include icon('menu');
display: none;
position: absolute;
top: 0;
left: 0;
background-color: $color-white;
color: $color-black;
font-size: 2em;
padding: 0.72em;
cursor: pointer;
}
#navbar {
background-color: $color-white;
color: $color-grey;
@ -28,8 +15,8 @@
@include border-shadow(right);
}
@media (max-width: 32rem) {
.btn-toggle {
@include media('width<phone') {
#button-toggle {
display: block;
}
#navbar {
@ -39,9 +26,6 @@
top: auto;
z-index: 1;
}
#header {
padding-left: 5rem;
}
}
#menu-items {
@ -98,35 +82,3 @@
}
}
}
/* sub menu (right menu) */
#mainContainer > div {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
> sib-router {
display: block;
background-color: #ccc;
sib-route {
display: block;
> div {
position: relative;
padding: 1em 2em;
border-bottom: 1px solid #888;
}
&[active] {
font-weight: bold;
> div:before {
content: '<';
position: absolute;
transform: translateX(-150%);
}
}
}
}
> div {
margin: 2.6em;
flex: 1 1 0px;
}
}

19
src/styles/variables.scss
View File

@ -1,3 +1,4 @@
// colors
$color-white: #fff;
$color-black: #36383b;
$color-grey: #898f95;
@ -6,16 +7,12 @@ $color-grey-light: #f0f3f6;
$color-yellow: #ffb700;
$color-yellow-light: #ffd759;
%button {
border-radius: 100em;
%shadow {
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15);
}
%button-yellow {
@extend %button;
background-color: $color-yellow;
color: $color-white;
}
%shadow{
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.05);
}
$breakpoints: (
phone: 480px,
tablet: 768px,
desktop: 1024px,
);