diff --git a/Makefile b/Makefile index d7a8fb3..6bbdda3 100644 --- a/Makefile +++ b/Makefile @@ -14,7 +14,7 @@ install: node_modules copy_lib copy_samples submodules submodules: git submodule init - git submodule update + git submodule update --recursive --remote build: $(DIST_DIR)/index.html $(DIST_DIR)/styles/index.css $(SCRIPT_DEST) diff --git a/src/dependencies.pug b/src/dependencies.pug index 93a27b5..711b96b 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -5,7 +5,7 @@ script(src="/lib/webcomponentsjs/webcomponents-loader.js") script(src="/lib/oidc-client.js") script( - src="/lib/sib-oidc/sib-oidc.js" + src="https://cdn.happy-dev.fr/sib-oidc/sib-oidc.js" data-authority=`${sdn}/openid/`, data-client_id=`${client_id}`, data-response_type='id_token token', @@ -29,11 +29,11 @@ link(href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,6 // Web components //- local -link(rel='import', href='/lib/sib-core/sib-display.html') -link(rel='import', href='/lib/sib-router/sib-router.html') -//- link(rel='import', href='/lib/sib-chat/sib-chat.html') +//- link(rel='import', href='/lib/sib-core/sib-display.html') + link(rel='import', href='/lib/sib-router/sib-router.html') + link(rel='import', href='/lib/sib-chat/sib-chat.html') //- cdn - link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html") - link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html") +link(rel='import', href="https://cdn.happy-dev.fr/sib-core/sib-display.html") +link(rel='import', href="https://cdn.happy-dev.fr/sib-router/sib-router.html") link(rel='import', href="https://cdn.happy-dev.fr/sib-chat/sib-chat.html") diff --git a/src/header.pug b/src/header.pug index a20b981..7301712 100644 --- a/src/header.pug +++ b/src/header.pug @@ -15,8 +15,9 @@ details #notifications include page-notifications.pug -#profile - img(src="/images/user.jpg") - span - | Profile - span.icon-arrow-down +sib-display#profile( + data-fields='first_name,profile.picture', + widget-profile.picture='sib-display-img', + bind-user + ) + diff --git a/src/menu.pug b/src/menu.pug index 25b7d14..d89e4d7 100644 --- a/src/menu.pug +++ b/src/menu.pug @@ -17,7 +17,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Projects div.menu-icon.icon-folder-alt sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`) @@ -31,7 +31,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Groups div.menu-icon.icon-globe sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) @@ -45,7 +45,7 @@ nav#navbar div.menu-wrapper div.menu div.menu-chevron - div.menu-icon.icon-arrow-down + div.menu-icon.icon-arrow-up div.menu-label Chat div.menu-icon.icon-envelope-letter sib-route(hidden, name='member-chat', id-prefix=`${sdn}/members/`) diff --git a/src/menu.pug.orig b/src/menu.pug.orig deleted file mode 100644 index 08c515e..0000000 --- a/src/menu.pug.orig +++ /dev/null @@ -1,63 +0,0 @@ -nav#navbar - sib-router#navbar-router(default-route='members') - sib-route.menu(name='members') - div.menu-notification - div 1 - div.menu-label Members - div.menu-icon.icon-people - sib-route.menu(hidden, name='member', id-prefix=`${sdn}/members/`) - div.divider - sib-route.menu(name='job-offers') - div.menu-notification - div 2 - div.menu-label Job offers - div.menu-icon.icon-briefcase - sib-route(hidden, name='job-offer-create') - div.divider - div.menu-wrapper - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-down - div.menu-label Projects - div.menu-icon.icon-folder-alt - sib-route(hidden,name='project', id-prefix=`${sdn}/projects/`) - div.sub-menu - sib-display( - data-src=`${sdn}/projects/`, - data-fields='name', - next='project' - ) - div.divider - div.menu-wrapper - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-down - div.menu-label Groups - div.menu-icon.icon-globe - sib-route(hidden, name='group', id-prefix=`${sdn}/channels/`) - div.sub-menu - sib-display( - data-src=`${sdn}/channels/`, - data-fields='name', - next='group' - ) - div.divider - div.menu-wrapper - div.menu - div.menu-chevron - div.menu-icon.icon-arrow-down - div.menu-label Chat - div.menu-icon.icon-envelope-letter - sib-route(hidden, name='chat', id-prefix=`${sdn}/users/`) - div.sub-menu - sib-display( -<<<<<<< HEAD - data-src=`${sdn}/members/`, - data-fields='pseudo', -======= - data-src=`${sdn}/users/`, - data-fields='username', ->>>>>>> 627b84b... wip - next='chat' - ) - div.divider diff --git a/src/page-group-profile.pug b/src/page-group-profile.pug index 0ecb4dc..fcf3b47 100644 --- a/src/page-group-profile.pug +++ b/src/page-group-profile.pug @@ -8,8 +8,8 @@ sib-display( id-suffix='members', data-fields='user-thumb', - set-user-thumb='member.avatar, first_name, last_name', - widget-member.avatar='sib-display-img', + set-user-thumb='profile.picture, first_name, last_name', + widget-profile.picture='sib-display-img', bind-resources ) @@ -28,7 +28,7 @@ sib-display( data-fields='title, label-description, description, client', - set-title='number, client.name, name', + set-title='phone, client.name, name', set-client='label-client, client.name, client.logo, client.address', value-label-description="Description:" value-label-client="Client:" diff --git a/src/page-job-offer-create.pug b/src/page-job-offer-create.pug index aa6e77c..14dd881 100644 --- a/src/page-job-offer-create.pug +++ b/src/page-job-offer-create.pug @@ -4,7 +4,7 @@ div .form-view sib-form.block( data-src=`${sdn}/job-offers/`, - data-fields="author, description, skills", + data-fields="description, skills", widget-author='sib-form-dropdown', - widget-skills='sib-form-multiple-dropdown', + range-skills= `${sdn}/skills/`, ) diff --git a/src/page-job-offers.pug b/src/page-job-offers.pug index b08d423..c380d33 100644 --- a/src/page-job-offers.pug +++ b/src/page-job-offers.pug @@ -1,26 +1,27 @@ div.grid-layer div.grid-layer-main.containerV - h1 New offers + h2 New offers span Here you can find and post offers sib-display#offers-list( data-src=`${sdn}/job-offers/`, data-fields='date, user-thumb, title, description, skills', widget-skills='sib-display-lookuplist', - set-user-thumb='author.member.avatar, author.first_name, author.last_name' - widget-author.member.avatar='sib-display-img', + set-user-thumb='author.profile.picture, author.first_name, author.last_name', + widget-author.profile.picture='sib-display-img', set-date='closingDate, creationDate', + set-creation='creationDate', widget-closingDate='hdapp-closing-date', set-content='title, description', - search-fields='content,skills,open' - search-range-skills=`${sdn}/skills/`, + search-fields='content,skills,open', + search-range-skills=`${sdn}/skills/` ) div.grid-layer-links.containerV sib-link(next="job-offer-create").containerH.containerCenter.action-link - div.containerV.fix.icon-plus - div.containerV.fix Post a new offer + div.icon-plus + div Post a new offer sib-link().containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow How To find a new offer + div.icon-idea + div.grow How To find a new offer? sib-link().containerH.containerCenter.how-link - div.containerV.fix.icon-idea - div.containerV.grow How to set notification ? + div.icon-idea + div.grow How to set notification? diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug index 4a5a2c5..6fbc111 100644 --- a/src/page-member-edit.pug +++ b/src/page-member-edit.pug @@ -1,14 +1,6 @@ .form-view - label.d-none(for='avatar-input') - img#avatar-preview(src='', style='width: 100%;') - input#avatar-input.d-none( - type='file', - accept='image/*', - name='avatar', - value='', - ) sib-form.block( - data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website', + data-fields='user, picture, bio, cell, jabberID, phone, pseudo, skills, website', widget-user='hdapp-usereditinfo', range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown', range-skills=`${sdn}/skills/`, diff --git a/src/page-member-profile.pug b/src/page-member-profile.pug index 04d14ba..48a856c 100644 --- a/src/page-member-profile.pug +++ b/src/page-member-profile.pug @@ -1,22 +1,21 @@ template#chat-link sib-link(next="member-chat") ${value} sib-display#member-info( - data-fields='available, header, name, pseudonym, infos, skills', - set-header='avatar', - set-infos='cell, roles,send, user.email, number, foaf:homepage', + data-fields='available, header, name, pseudonym, infos, user.skills', + set-header='picture', + set-infos='city, country, user.roles, user.email, send, phone, foaf:homepage, ', set-name='user.first_name, user.last_name', set-pseudonym='before-pseudo, pseudo', value-before-pseudo='@', value-send='SEND A MESSAGE', template-send='chat-link', widget-available='hdapp-available', - widget-avatar='sib-display-img', + widget-picture='sib-display-img', widget-user='hdapp-userinfo', - widget-cell='hdapp-usercell', - widget-number='sib-display-tel', + widget-phone='sib-display-tel', widget-foaf:homepage='hdapp-hyperlink', widget-user.email='sib-display-mailto', - widget-roles='sib-display-lookuplist', - widget-skills='sib-display-lookuplist', + widget-user.roles='sib-display-lookuplist', + widget-user.skills='sib-display-lookuplist', bind-resources ) diff --git a/src/page-members.pug b/src/page-members.pug index 2bc6877..53c7277 100644 --- a/src/page-members.pug +++ b/src/page-members.pug @@ -7,8 +7,8 @@ div.grid-layer h1 Members sib-display#profiles-list( data-src=`${sdn}/members/`, - data-fields='header, infos, group, role, more', - set-header='avatar, user, pseudonym, bio, send', + data-fields='header, infos, groups, role, more', + set-header='picture, user, pseudonym, bio, send, city, country', set-infos='cell, roles, user.email, foaf:homepage, skills', set-pseudonym='before-pseudo,pseudo' search-label-skills='competences', @@ -20,10 +20,9 @@ div.grid-layer template-more='hdapp-link-more', value-send='SEND A MESSAGE', template-send='chat-link', - widget-avatar='sib-display-img', + widget-picture='sib-display-img', widget-user='hdapp-userinfo', widget-foaf:hompage='hdapp-hyperlink', - widget-cell='hdapp-usercell', widget-roles='sib-display-lookuplist', widget-skills='sib-display-lookuplist', set-name='pseudo,user.first_name,user.last_name', diff --git a/src/page-notifications.pug b/src/page-notifications.pug index eb38c1f..68b15af 100644 --- a/src/page-notifications.pug +++ b/src/page-notifications.pug @@ -2,6 +2,6 @@ div.frame h1 Notifications sib-display( - data-src=`${sdn}/notifications/` + bind-user data-fields='summary' ) \ No newline at end of file diff --git a/src/page-project-create.pug b/src/page-project-create.pug index 11d7b45..1e235d6 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -2,7 +2,7 @@ h1 New project .form-view sib-form.block( data-src=`${sdn}/projects/`, - range-client=`${sdn}/clients/`, + range-customer=`${sdn}/customers/`, widget-team='sib-form-multiple-dropdown', range-team=`${sdn}/members/` ) diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 534754f..859cea0 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -2,9 +2,9 @@ h1 Edit project //- sib-display(data-fields="name" bind-resources)] .form-view sib-form( - range-client=`${sdn}/clients/`, + range-customer=`${sdn}/customers/`, range-team=`${sdn}/members/`, - data-fields=`name, number, client, description, team, jabberRoom, foaf:jabberID`, + data-fields=`name, phone, customer, description, team, jabberRoom, foaf:jabberID`, widget-jabberRoom='sib-form-checkbox', widget-description='sib-form-textarea', widget-team='hdapp-link-more', diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 4d12e61..c7cc89b 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -1,5 +1,5 @@ .frame - template#client-template + template#customer-template div#clientBox div h2 Client : @@ -13,13 +13,13 @@ h2 Contact : sib-display( - data-fields='title, client.logo, label-description, description, client', - set-title='const-title1,number,client.name,const-title2, name', - widget-client.logo='sib-display-img', - template-client='client-template', + data-fields='title, customer.logo, label-description, description, customer', + set-title='const-title1,phone, customer.name,const-title2, name', + widget-customer.logo='sib-display-img', + template-customer='customer-template', widget-team='sib-display-lookuplist', value-label-description="Description:", - value-label-client="Client:", + value-label-customer="Client:", value-const-title1="N°:", value-const-title2="-", bind-resources, @@ -29,10 +29,10 @@ div.containerH sib-display.members-list-condensed( id-suffix='team', - data-fields='member.avatar, member.user, member.roles', - widget-member.avatar='sib-display-img', - widget-member.user='hdapp-userinfo', - widget-member.roles='sib-display-lookuplist', - next='member', + data-fields='profile.picture, profile.user, groups', + widget-profile.picture='sib-display-img', + widget-profile.user='hdapp-userinfo', + widget-groups='sib-display-lookuplist', + next='profile', bind-resources, ) diff --git a/src/page-projects.pug b/src/page-projects.pug index 7563087..4490ae2 100644 --- a/src/page-projects.pug +++ b/src/page-projects.pug @@ -3,8 +3,8 @@ div h1 Projects sib-display( data-src=`${sdn}/projects/`, - data-fields='number, client, name', - widget-client='hdapp-client', - search-fields='number, name', + data-fields='phone, customer, name', + widget-customer='hdapp-client', + search-fields='phone, name', next='project' ) diff --git a/src/scripts/hd-widgets.js b/src/scripts/hd-widgets.js index b8fa942..ccc8377 100644 --- a/src/scripts/hd-widgets.js +++ b/src/scripts/hd-widgets.js @@ -27,32 +27,6 @@ document.addEventListener('WebComponentsReady', function(event) { } customElements.define('hdapp-userinfo', HDAppUserInfo); - class HDAppCell extends SIBDisplayLookupList { - get parentElement() { - return 'div'; - } - getTemplate(value, index) { - var city, country; - - if (typeof value == 'object') - if (Object.keys(value).length > 1) { - city = value.city; - country = value.country; - } else { - store.get(value).then(resource => { - this.value.push(resource); - this.render(); - }); - if (Array.isArray(this.value)) - this.value.splice(this.value.indexOf(value), 1); - else this.value = []; - return ''; - } - return `${city} - ${country}`; - } - } - customElements.define('hdapp-usercell', HDAppCell); - class HDAppMail extends SIBWidget { get template() { return `
SEND A MESSAGE
`; diff --git a/src/styles/content.scss b/src/styles/content.scss index 10d941f..f78d466 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -7,28 +7,6 @@ // //float: right; // } -#offers-list { - > div { - > sib-display { - display: block; - margin: 1em 0; - @extend %frame; - padding: 2em; - /*&:nth-child(odd) { - background-color: $color-grey-light; - }*/ - sib-display-div[name='title'] { - display: block; - @extend h2; - } - - label { - display: none; - } - } - } -} - [name='user-thumb'] { display: flex; align-items: center; @@ -304,41 +282,6 @@ hdapp-available { } } -#offers-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; - } -} -#offers-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 { ul { @@ -465,57 +408,6 @@ hdapp-available { } } -.right-link { - padding: 0.5em; - margin-bottom: 1em; - margin-left: 1em; - flex-basis: content; - border-radius: 2em; - - div[class*="icon-"] { - margin-right: 1em; - } -} - -.how-link { - @extend .right-link; - background-color: $color-white; - color: $color-black; - flex-wrap: nowrap; - .icon-idea { - background-color: $color-yellow-light; - border-radius: 100%; - flex-shrink: 0; - flex-grow: 0; - justify-content: center; - align-items: center; - display: flex; - flex-direction: column; - width: 1.8em; - height: 1.8em; - //margin-right: 1em; - } -} - -.action-link { - @extend .right-link; - background-color: $color-yellow; - color: $color-white; - font-weight: bold; - text-transform: uppercase; - - .icon-plus { - flex-shrink: 0; - flex-grow: 0; - justify-content: center; - align-items: center; - display: flex; - - &:before { - //font-size: 1.3em; - } - } -} /* label { @extend h2; @@ -524,3 +416,4 @@ label { } } */ + diff --git a/src/styles/filters.scss b/src/styles/filters.scss new file mode 100644 index 0000000..099bdaf --- /dev/null +++ b/src/styles/filters.scss @@ -0,0 +1,47 @@ +#offers-list > sib-form > form { + border-bottom: 1px solid $color-grey1; + display: grid; + grid-gap: 0px 30px; + grid-template-columns: 33% auto; + padding-bottom: 3em; + + label { + display: block; + } + + input, select { + border-style: none; + box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09); + margin-top: 1em; + } + + input[type="submit"] { + display: none; + } + + select { + background: white; + box-sizing: border-box; + display: inline-block; + padding: 0.5em 12.5em 0.5em 1em; + + background-image: + linear-gradient(45deg, transparent 50%, $color-grey 50%), + linear-gradient(135deg, $color-grey 50%, transparent 50%), + linear-gradient(to right, white, white); + background-position: + calc(100% - 20px) calc(1em + 2px), + calc(100% - 15px) calc(1em + 2px), + calc(100% - 2.5em) 0.5em; + background-repeat: no-repeat; + background-size: + 5px 6px, + 5px 6px, + 1px 1.5em; + } + + sib-form-label-text { + display: flex; + flex-direction: column; + } +} diff --git a/src/styles/form.scss b/src/styles/form.scss index cee8deb..93297b5 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -13,9 +13,9 @@ padding: 1em; } sib-display sib-form form { - margin: -0.5em; + //margin: -0.5em; > * { - margin: 0.5em; + margin-top: 0.5em; } } sib-form.block { @@ -64,11 +64,12 @@ sib-form.block { } } +//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres. sib-form { // text like textarea, input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) { - padding: 0.5em; + padding: 0.7em; border: none; @extend %shadow; } @@ -105,14 +106,3 @@ sib-form { } } } - -sib-form-label-text,sib-form-dropdown{ - display: flex; - flex-wrap: nowrap; -} - -select{ - background-color: $color-white; - border-style: none; - box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15) -} diff --git a/src/styles/header.scss b/src/styles/header.scss index a150cec..fbd0f0c 100644 --- a/src/styles/header.scss +++ b/src/styles/header.scss @@ -13,6 +13,7 @@ flex-shrink: 0; align-items: center; padding: 1em 0.4em; + position: relative; > * { padding: 0 1.8rem; diff --git a/src/styles/index.scss b/src/styles/index.scss index 457c9b4..ecd5f85 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -8,6 +8,9 @@ @import 'main'; @import 'form'; @import 'content'; +@import 'filters'; +@import 'right-panel'; +@import 'job-offers'; // @import 'members'; @import 'header'; diff --git a/src/styles/job-offers.scss b/src/styles/job-offers.scss new file mode 100644 index 0000000..e084221 --- /dev/null +++ b/src/styles/job-offers.scss @@ -0,0 +1,57 @@ +#offers-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; + + &:first-of-type { + margin-top: 3em; + } + + > sib-display { + @extend %frame; + display: block; + margin: 1em 0; + padding: 2em; + /*&:nth-child(odd) { + background-color: $color-grey-light; + }*/ + sib-display-div[name='title'] { + @extend h2; + display: block; + } + + label { + display: none; + } + } + } +} + +[name='user-thumb'] { + align-items: center; + color: $color-black-light; + display: flex; + font-weight: 600; + margin: -0.25em; + + > * { + margin: 0.25em; + } + + sib-display-img { + border-radius: 100%; + height: 2.5em; + overflow: hidden; + width: 2.5em; + } +} \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 7153236..742aa64 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -48,8 +48,7 @@ h1 { font-size: 1.24em; } -h2 { - font-size: 1.04em; +h2 { font-size: 20px; } h3 { @@ -68,77 +67,6 @@ h4 { @extend %frame; padding: 1em; } -/* -#header { - background-color: $color-white; - color: $color-black; - //position: relative; - //@include border-shadow(bottom); - box-shadow: 0 0 4px rgba(0, 0, 0, 0.15); - border: solid $color-white; - border-width: 1px 0; - display: flex; - //flex-grow: 0; - //flex-basis : 150px; - flex-shrink: 0; - 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 { - flex: 1 1 0; -} - -#notifications-button { - @include icon(bell); - font-size: 2em; - cursor: pointer; - list-style-type: none; -} - -#notifications { - position: absolute; - right: 0; - bottom: 0; - height: 0; - left: 0; - z-index: 1; - - > div { - position: absolute; - top: 0; - right: 0; - } -} - -#profile { - > * { - vertical-align: middle; - } - - img { - margin-right: 0.5em; - width: 48px; - height: 48px; - object-fit: cover; - object-position: center; - border-radius: 100%; - } -} -*/ .menu-notification { //flex-basis: 3em; @@ -347,16 +275,17 @@ sib-trigger.back { .grid-layer{ display: grid; - grid-template-columns: [start]auto[middle]20em[end]; - grid-template-rows: [start]10em[middle]auto[end]; + font-size: 16px; + grid-template-columns: [start]auto[middle]25%[end]; + grid-template-rows: [start]13em[middle]auto[end]; } -.grid-layer-main{ +.grid-layer-main { grid-column-start: start; grid-column-end: end; grid-row-start: start; grid-row-end: end; } -.grid-layer-links{ +.grid-layer-links { grid-column-start: middle; grid-column-end: end; grid-row-start: start; diff --git a/src/styles/right-panel.scss b/src/styles/right-panel.scss new file mode 100644 index 0000000..fd97352 --- /dev/null +++ b/src/styles/right-panel.scss @@ -0,0 +1,49 @@ +.right-link { + padding: 0.5em; + margin-bottom: 1em; + margin-left: 5em; + flex-basis: auto; + border-radius: 2em; + + div[class*="icon-"] { + align-items: center; + display: flex; + flex-grow: 0; + flex-shrink: 0; + } +} + +.how-link { + @extend .right-link; + background-color: $color-white; + color: $color-black; + flex-wrap: nowrap; + .icon-idea { + background-color: $color-yellow-light; + border-radius: 100%; + justify-content: center; + margin-right: 0.7em; + //flex-direction: column; + width: 1.8em; + height: 1.8em; + //margin-right: 1em; + } +} + +.action-link { + @extend .right-link; + background-color: $color-yellow; + color: $color-white; + font-weight: bold; + text-transform: uppercase; + + .icon-plus { + font-size: 20px; + justify-content: center; + margin: 0.3em 0.3em 0.3em 0; + + &:before { + //font-size: 1.3em; + } + } +} \ No newline at end of file diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 17a486d..bd4a04a 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -1,6 +1,8 @@ // colors $color-white: #fff; $color-black: #36383b; +$color-black-light: #4a4a4a; +$color-grey1: #d7dbe0; $color-grey: #898f95; $color-grey-mid: #abaaba; $color-grey-light4: #b4b9c0; diff --git a/www/lib/sib-router b/www/lib/sib-router index 2d78d30..5be7c64 160000 --- a/www/lib/sib-router +++ b/www/lib/sib-router @@ -1 +1 @@ -Subproject commit 2d78d30a691f937a5b2cd64cdc40d1fba8a75835 +Subproject commit 5be7c64588b25ba63394f99f03ff19ee6e0c6644