css: refactoring & fixing - day 1
This commit is contained in:
Jean-Baptiste Pasquier
parent
5eff8ffcec
commit
6c1a28f604
2
Makefile
2
Makefile
@ -60,7 +60,7 @@ $(DIST_DIR)/index.staging.html: src/index.pug src/config.json $(wildcard src/*.p
|
|||||||
node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
|
node_modules/.bin/pug --pretty $< --out $(dir $@) -E staging.html -O src/config.json || touch $@
|
||||||
|
|
||||||
# sass
|
# sass
|
||||||
$(DIST_DIR)/styles/index.css: src/styles/index.scss $(wildcard src/*.scss src/*/*.scss)
|
$(DIST_DIR)/styles/index.css: src/styles/_index.scss $(wildcard src/*.scss src/*/*.scss src/*/*/*.scss src/*/*/*/*.scss)
|
||||||
@echo sass: $< ➜ $@
|
@echo sass: $< ➜ $@
|
||||||
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
|
@node_modules/.bin/node-sass $< $@ --source-map true --source-map-contents || touch $@
|
||||||
|
|
||||||
|
|||||||
10
server.js
10
server.js
@ -21,6 +21,12 @@ bs.init({
|
|||||||
proxy: `http://localhost:${port}`,
|
proxy: `http://localhost:${port}`,
|
||||||
open: false,
|
open: false,
|
||||||
notify: false,
|
notify: false,
|
||||||
port: browserSyncPort
|
port: browserSyncPort,
|
||||||
// tunnel: true,
|
files: [
|
||||||
|
'www/styles/index.css',
|
||||||
|
'www/scripts/index.js',
|
||||||
|
'www/index.html',
|
||||||
|
'www/images/**',
|
||||||
|
'www/fonts/**'
|
||||||
|
]
|
||||||
});
|
});
|
||||||
|
|||||||
@ -1,28 +1,21 @@
|
|||||||
// Scripts
|
|
||||||
//- script(src="https://unpkg.com/@webcomponents/webcomponentsjs@1.2.7/webcomponents-loader.js")
|
|
||||||
//script(src="/lib/webcomponentsjs/webcomponents-loader.js")
|
|
||||||
//- script(src="lib/html-imports.js")
|
|
||||||
|
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
|
script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
|
||||||
|
|
||||||
script(src="/scripts/index.js")
|
script(src="/scripts/index.js")
|
||||||
|
|
||||||
// Stylesheets
|
//- Stylesheets
|
||||||
link(rel='stylesheet', href='/lib/normalize.css')
|
link(rel='stylesheet', href='/lib/normalize.css')
|
||||||
link(rel='stylesheet', href='/styles/index.css')
|
link(rel='stylesheet', href='/styles/index.css')
|
||||||
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
|
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&subset=latin-ext')
|
||||||
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
|
link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
|
||||||
|
|
||||||
// Web components
|
|
||||||
|
|
||||||
//- local
|
//- local
|
||||||
//script(type="module" src="/lib/sib-core/sib-display.js")
|
//- script(type="module" src="/lib/sib-core/src/index.js")
|
||||||
//script(type="module" src="/lib/sib-router/sib-router.js")
|
//- script(type="module" src="/lib/sib-router/src/index.js")
|
||||||
//script(type="module" src="/lib/sib-core/sib-form.js")
|
//- script(type="module" src="/lib/sib-chat/sib-chat.js")
|
||||||
|
//- script(type="module" src="/lib/sib-notifications/sib-notifications.js")
|
||||||
|
//- script(type="module" src="/lib/sib-conversation/sib-conversation.js")
|
||||||
|
//- script(type="module" src="/lib/sib-directory/sib-directory.js")
|
||||||
|
|
||||||
//link(rel='import', href='/lib/sib-chat/sib-chat.html')
|
//- CDN
|
||||||
|
|
||||||
//- cdn
|
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
|
script(type="module" src="https://unpkg.com/@startinblox/core@0.7.15")
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
|
script(type="module" src="https://unpkg.com/@startinblox/router@0.7.2")
|
||||||
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
|
script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.1.7")
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
#button-toggle
|
|
||||||
#logo
|
#logo
|
||||||
img(src="/images/logo.png" width=111 height=32)
|
img(src="/images/logo.png" width=111 height=32)
|
||||||
|
|
||||||
|
|||||||
@ -9,33 +9,33 @@ html(lang="en")
|
|||||||
link(rel="icon" type="image/png" href="/images/favicon.png")
|
link(rel="icon" type="image/png" href="/images/favicon.png")
|
||||||
include dependencies.pug
|
include dependencies.pug
|
||||||
body
|
body
|
||||||
div.layer
|
|
||||||
header#header.row(role='banner')
|
header#header.row(role='banner')
|
||||||
include header.pug
|
include header.pug
|
||||||
.content.row
|
.content.row
|
||||||
include menu-left.pug
|
include menu-left.pug
|
||||||
|
|
||||||
main#mainContainer
|
main#mainContainer
|
||||||
//- #dashboard(hidden)
|
|
||||||
include page-dashboard.pug
|
#members(hidden).padded-width
|
||||||
#members(hidden)
|
|
||||||
include page-members.pug
|
include page-members.pug
|
||||||
#member-chat(hidden)
|
|
||||||
include page-member-chat.pug
|
#job-offers(hidden).padded-width
|
||||||
#job-offers(hidden)
|
|
||||||
include page-job-offers.pug
|
include page-job-offers.pug
|
||||||
#job-offer-create(hidden)
|
|
||||||
|
#job-offer-create(hidden).padded-width
|
||||||
|
sib-link(class="backlink", next="job-offers") Back
|
||||||
include page-job-offer-create.pug
|
include page-job-offer-create.pug
|
||||||
|
|
||||||
#project(hidden)
|
#project(hidden)
|
||||||
include page-project.pug
|
include page-project.pug
|
||||||
#user-profile(hidden)
|
|
||||||
#user-settings(hidden)
|
|
||||||
#user-admin(hidden)
|
|
||||||
//- #client-creation(hidden)
|
|
||||||
include page-client-creation.pug
|
|
||||||
//-#groups(hidden)
|
|
||||||
include page-groups.pug
|
|
||||||
#circle(hidden)
|
#circle(hidden)
|
||||||
include page-group.pug
|
include page-group.pug
|
||||||
//- #search(hidden)
|
|
||||||
include page-search.pug
|
#member-chat(hidden)
|
||||||
|
include page-member-chat.pug
|
||||||
|
|
||||||
|
#user-profile(hidden)
|
||||||
|
|
||||||
|
#user-settings(hidden)
|
||||||
|
|
||||||
|
#user-admin(hidden)
|
||||||
|
|||||||
@ -4,8 +4,7 @@ nav#navbar
|
|||||||
div.menu-notification
|
div.menu-notification
|
||||||
sib-display(
|
sib-display(
|
||||||
data-src=`${sdn}/members/`,
|
data-src=`${sdn}/members/`,
|
||||||
data-fields='-',
|
data-fields='-'
|
||||||
counter-template='${counter}'
|
|
||||||
)
|
)
|
||||||
div.menu-label Members
|
div.menu-label Members
|
||||||
div.menu-icon.icon-people
|
div.menu-icon.icon-people
|
||||||
@ -14,8 +13,7 @@ nav#navbar
|
|||||||
div.menu-notification
|
div.menu-notification
|
||||||
sib-display(
|
sib-display(
|
||||||
data-src=`${sdn}/job-offers/`,
|
data-src=`${sdn}/job-offers/`,
|
||||||
data-fields='-',
|
data-fields='-'
|
||||||
counter-template='${counter}'
|
|
||||||
)
|
)
|
||||||
div.menu-label Job offers
|
div.menu-label Job offers
|
||||||
div.menu-icon.icon-briefcase
|
div.menu-icon.icon-briefcase
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.frame-form
|
.frame-form.full-wide
|
||||||
h1 New group
|
h1 New group
|
||||||
p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
|
p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
|
||||||
.form-view
|
.form-view
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
#circle-edit
|
#circle-edit.frame-form
|
||||||
h1 Edit group
|
h1 Edit group
|
||||||
.form-view
|
.form-view
|
||||||
sib-form.block(
|
sib-form.block(
|
||||||
|
|||||||
@ -16,7 +16,7 @@ nav.jsRightMenu(role='navigation')
|
|||||||
sib-route(name='circle-create')
|
sib-route(name='circle-create')
|
||||||
li
|
li
|
||||||
a Add new
|
a Add new
|
||||||
#views-container
|
.views-container
|
||||||
#circle-chat
|
#circle-chat
|
||||||
include page-group-chat.pug
|
include page-group-chat.pug
|
||||||
#circle-profile
|
#circle-profile
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.frame-form
|
.frame-form.frame
|
||||||
|
|
||||||
sib-widget(name='title-text')
|
sib-widget(name='title-text')
|
||||||
template
|
template
|
||||||
@ -8,7 +8,6 @@
|
|||||||
template
|
template
|
||||||
p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
|
p Be specific and exhaustive to avoid answering too many questions later. Indicate what is the best way to fill the offer, the prerequisites...'
|
||||||
|
|
||||||
sib-link(next='job-offers' class='back') Back
|
|
||||||
h1 Post a new job offer
|
h1 Post a new job offer
|
||||||
p.form-goal This form allows you to share an offer to all members of the network.
|
p.form-goal This form allows you to share an offer to all members of the network.
|
||||||
.form-view
|
.form-view
|
||||||
|
|||||||
@ -5,7 +5,7 @@ div.grid-layer
|
|||||||
include templates/template-joboffers-filter.pug
|
include templates/template-joboffers-filter.pug
|
||||||
|
|
||||||
div.grid-layer-main.containerV
|
div.grid-layer-main.containerV
|
||||||
h2 New offers
|
h1 New offers
|
||||||
span Here you can find and post offers
|
span Here you can find and post offers
|
||||||
sib-display#offers-list(
|
sib-display#offers-list(
|
||||||
data-src=`${sdn}/job-offers/`,
|
data-src=`${sdn}/job-offers/`,
|
||||||
@ -38,7 +38,7 @@ div.grid-layer
|
|||||||
div.grid-layer-links.containerV
|
div.grid-layer-links.containerV
|
||||||
template#groups-list-template
|
template#groups-list-template
|
||||||
p ${value}
|
p ${value}
|
||||||
sib-link(next="job-offer-create").containerH.containerCenter.action-link
|
sib-link(next="job-offer-create").plus-button
|
||||||
div.icon-plus
|
div.icon-plus
|
||||||
div Post a new offer
|
div Post a new offer
|
||||||
//-sib-link().containerH.containerCenter.how-link
|
//-sib-link().containerH.containerCenter.how-link
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.frame-form
|
.frame-form.full-wide
|
||||||
h1 New project
|
h1 New project
|
||||||
p.form-goal Here you can create your project, add members and assign them a job.
|
p.form-goal Here you can create your project, add members and assign them a job.
|
||||||
.form-view
|
.form-view
|
||||||
|
|||||||
@ -17,7 +17,7 @@ sib-widget(name='template-members')
|
|||||||
label-user.name='Member(s)',
|
label-user.name='Member(s)',
|
||||||
)
|
)
|
||||||
|
|
||||||
.frame-form
|
.frame-form.full-wide
|
||||||
h1 Edit your project
|
h1 Edit your project
|
||||||
p.form-goal Here you can edit your projet's details
|
p.form-goal Here you can edit your projet's details
|
||||||
.form-view
|
.form-view
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
.frame
|
.frame-form.full-wide
|
||||||
|
|
||||||
include templates/template-business-provider.pug
|
include templates/template-business-provider.pug
|
||||||
include templates/template-customer.pug
|
include templates/template-customer.pug
|
||||||
|
|||||||
@ -15,7 +15,7 @@ nav.jsRightMenu(role='navigation')
|
|||||||
sib-route(name='project-create', use-id)
|
sib-route(name='project-create', use-id)
|
||||||
li
|
li
|
||||||
a Add new
|
a Add new
|
||||||
#views-container
|
.views-container
|
||||||
#project-chat
|
#project-chat
|
||||||
include page-project-chat.pug
|
include page-project-chat.pug
|
||||||
#project-profile
|
#project-profile
|
||||||
|
|||||||
@ -1,63 +0,0 @@
|
|||||||
document.addEventListener("DOMContentLoaded", function (event) {
|
|
||||||
// Constants declaration
|
|
||||||
const navBar = document.querySelector("#navbar");
|
|
||||||
const searchBar = document.querySelector("#search-bar");
|
|
||||||
const searchView = document.querySelector("#search-view");
|
|
||||||
const searchInput = searchBar.querySelector("#search-input");
|
|
||||||
const btnToggle = document.querySelector("#button-toggle");
|
|
||||||
|
|
||||||
|
|
||||||
// Shortcuts
|
|
||||||
window.addEventListener("keydown", function (e) {
|
|
||||||
// CTRL + K triggers the search feature
|
|
||||||
if ((e.keyCode == 75 || e.keyCode == 80) && (e.ctrlKey === true || e.metaKey === true)) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
openSearchBar();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Escape key
|
|
||||||
else if (e.keyCode == 27 && navBar.classList.contains("search-mode")) {
|
|
||||||
closeSearchBar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
searchBar.querySelector("#close-search-icon").addEventListener("click", emptySearchBar);
|
|
||||||
|
|
||||||
function openSearchBar(e) {
|
|
||||||
navBar.classList.add("search-mode");
|
|
||||||
searchBar.querySelector("#search-input").focus();
|
|
||||||
searchView.classList.add("search-mode");
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeSearchBar(e) {
|
|
||||||
navBar.classList.remove("search-mode");
|
|
||||||
searchView.classList.remove("search-mode");
|
|
||||||
}
|
|
||||||
|
|
||||||
function emptySearchBar(e) {
|
|
||||||
searchInput.value = '';
|
|
||||||
openSearchBar();
|
|
||||||
searchInput.focus;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// Synchronizes the search input with the <ldp-form>s
|
|
||||||
searchInput.addEventListener("keyup", (e) => {
|
|
||||||
searchView.querySelectorAll("ldp-form input[type=text]").forEach((el) => {
|
|
||||||
el.value = searchInput.value;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
btnToggle.addEventListener('click', e => {
|
|
||||||
navBar.classList.toggle('open');
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('click', e => {
|
|
||||||
navBar.classList.remove('open');
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
@ -1,34 +1,7 @@
|
|||||||
document.addEventListener('DOMContentLoaded', function (event) {
|
document.addEventListener('DOMContentLoaded', function (event) {
|
||||||
const navBar = document.querySelector('#navbar');
|
|
||||||
const btnToggle = document.querySelector('#button-toggle');
|
|
||||||
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
|
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
|
||||||
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
|
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
|
||||||
|
|
||||||
if (!navBar || !btnToggle) return;
|
|
||||||
|
|
||||||
btnToggle.addEventListener('click', e => {
|
|
||||||
navBar.classList.toggle('open');
|
|
||||||
e.stopPropagation();
|
|
||||||
});
|
|
||||||
|
|
||||||
window.addEventListener('click', e => {
|
|
||||||
navBar.classList.remove('open');
|
|
||||||
});
|
|
||||||
|
|
||||||
function resize() {
|
|
||||||
setTimeout(() =>
|
|
||||||
Array.from(document.querySelectorAll('.chat-view')).forEach(elm => {
|
|
||||||
if (!elm.offsetParent) return;
|
|
||||||
elm.style.setProperty('--pos-top', elm.offsetTop + 'px');
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
window.addEventListener('resize', resize);
|
|
||||||
window.addEventListener('navigate', resize);
|
|
||||||
window.addEventListener('popstate', resize);
|
|
||||||
document.addEventListener('load', resize);
|
|
||||||
document.addEventListener('WebComponentsReady', resize);
|
|
||||||
resize();
|
|
||||||
|
|
||||||
// Toggle sub-menus
|
// Toggle sub-menus
|
||||||
menuWrappers.forEach(menuWrapper => {
|
menuWrappers.forEach(menuWrapper => {
|
||||||
const menu = menuWrapper.querySelector('.menu');
|
const menu = menuWrapper.querySelector('.menu');
|
||||||
@ -44,5 +17,6 @@ document.addEventListener('DOMContentLoaded', function (event) {
|
|||||||
btnRightMenu.addEventListener('click', e => {
|
btnRightMenu.addEventListener('click', e => {
|
||||||
rightMenu.classList.toggle('offsite-is-closed');
|
rightMenu.classList.toggle('offsite-is-closed');
|
||||||
})
|
})
|
||||||
})
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
17
src/styles/_index.scss
Normal file
17
src/styles/_index.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
|
||||||
|
@import '../../node_modules/include-media/dist/include-media';
|
||||||
|
|
||||||
|
@import 'abstracts/variables';
|
||||||
|
@import 'abstracts/mixins';
|
||||||
|
@import 'components/icons/index';
|
||||||
|
@import 'base/main';
|
||||||
|
@import 'components/index';
|
||||||
|
|
||||||
|
main#mainContainer {
|
||||||
|
@import 'layout/members/index';
|
||||||
|
@import 'layout/job-offers/index';
|
||||||
|
@import 'layout/project-profile/index';
|
||||||
|
@import 'layout/circle-profile/index';
|
||||||
|
@import 'layout/member-chat/index';
|
||||||
|
}
|
||||||
24
src/styles/abstracts/_mixins.scss
Normal file
24
src/styles/abstracts/_mixins.scss
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
@mixin style-template-fieldset($name: 'default') {
|
||||||
|
template-legend-#{$name} {
|
||||||
|
border-bottom: 1px solid $color-221-51-90;
|
||||||
|
color: $color-233-18-29;
|
||||||
|
font-size: 1.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) {
|
||||||
|
box-shadow: 0 0 8px 0 $shadow;
|
||||||
|
background-color: $background;
|
||||||
|
}
|
||||||
|
|
||||||
|
%user-role {
|
||||||
|
border: 1px solid $color-45-95-54;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: $color-210-4-50;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
padding: calc(1.6rem - 0.8em) 0.7em;
|
||||||
|
}
|
||||||
25
src/styles/abstracts/_variables.scss
Normal file
25
src/styles/abstracts/_variables.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
// Color Variables
|
||||||
|
$color-43-100-50: hsl(43, 100%, 50%);
|
||||||
|
$color-45-95-54: hsl(45, 95%, 54%);
|
||||||
|
$color-46-100-67: hsl(46, 100%, 67%);
|
||||||
|
$color-46-100-50: hsl(46, 100%, 50%);
|
||||||
|
$color-0-0-100: hsl(0, 0%, 100%);
|
||||||
|
$color-210-17-91: hsl(210, 17%, 91%);
|
||||||
|
$color-222-52-90: hsl(222, 52%, 90%);
|
||||||
|
$color-210-25-95: hsl(210, 25%, 95%);
|
||||||
|
$color-222-57-95: hsl(222, 57%, 95%);
|
||||||
|
$color-213-20-91: hsl(213, 20%, 91%);
|
||||||
|
$color-221-51-90: hsl(221, 51%, 90%);
|
||||||
|
$color-0-0-85: hsl(0, 0%, 85%);
|
||||||
|
$color-229-25-79: hsl(229, 25%, 79%);
|
||||||
|
$color-215-9-73: hsl(215, 9%, 73%);
|
||||||
|
$color-244-10-70: hsl(244, 10%, 70%);
|
||||||
|
$color-215-6-63: hsl(215, 6%, 63%);
|
||||||
|
$color-210-5-56: hsl(210, 5%, 56%);
|
||||||
|
$color-210-4-50: hsl(210, 4%, 50%);
|
||||||
|
$color-213-4-50: hsl(213, 4%, 50%);
|
||||||
|
$color-213-13-86: hsla(213, 13%, 86%, 0.2);
|
||||||
|
$color-0-0-29: hsl(0, 0%, 29%);
|
||||||
|
$color-233-18-29: hsl(233, 18%, 29%);
|
||||||
|
$color-216-4-22: hsl(216, 4%, 22%);
|
||||||
|
$color-244-73-62: hsl(244, 73%, 62%);
|
||||||
73
src/styles/base/_compat.scss
Normal file
73
src/styles/base/_compat.scss
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
.grid-layer {
|
||||||
|
display: grid;
|
||||||
|
font-size: 16px;
|
||||||
|
grid-template-columns: [start]auto[middle]25%[end];
|
||||||
|
grid-template-rows: [start]7em[middle]auto[end];
|
||||||
|
}
|
||||||
|
|
||||||
|
%flex-grid-layer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-layer-main {
|
||||||
|
@extend %flex-grid-layer;
|
||||||
|
grid-column-start: start;
|
||||||
|
grid-column-end: end;
|
||||||
|
grid-row-start: start;
|
||||||
|
grid-row-end: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-layer-links {
|
||||||
|
@extend %flex-grid-layer;
|
||||||
|
grid-column-start: middle;
|
||||||
|
grid-column-end: end;
|
||||||
|
grid-row-start: start;
|
||||||
|
grid-row-end: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerH {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerV {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grow {
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fix {
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.containerCenter {
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: flex;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex-direction: row;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col {
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
114
src/styles/base/main.scss
Normal file
114
src/styles/base/main.scss
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
$breakpoints: (phone: 480px,
|
||||||
|
tablet: 768px,
|
||||||
|
desktop: 1024px) !default;
|
||||||
|
|
||||||
|
[hidden],
|
||||||
|
.hidden {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: Open Sans, sans-serif;
|
||||||
|
--sib-notifications-theme: #{$color-46-100-50};
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: $color-210-25-95;
|
||||||
|
color: $color-213-4-50;
|
||||||
|
font-size: 1.6rem;
|
||||||
|
overflow: hidden;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
color: $color-216-4-22;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-weight: 400;
|
||||||
|
padding-left: 0.85rem;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: '// ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
%padding-main {
|
||||||
|
padding: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.padded-width {
|
||||||
|
flex: 1;
|
||||||
|
@extend %padding-main;
|
||||||
|
}
|
||||||
|
|
||||||
|
.frame {
|
||||||
|
@include window-style-modal();
|
||||||
|
@extend %padding-main;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
margin: 2rem 1rem 5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dividing into columns */
|
||||||
|
@mixin respond-to($breakpoint) {
|
||||||
|
|
||||||
|
@if map-has-key($breakpoints, $breakpoint) {
|
||||||
|
|
||||||
|
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@else {
|
||||||
|
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
|
||||||
|
+"Available breakpoints are: #{map-keys($breakpoints)}.";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compatibility layer for non-updated components
|
||||||
|
@import 'compat';
|
||||||
8
src/styles/components/_index.scss
Normal file
8
src/styles/components/_index.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
@import 'form';
|
||||||
|
@import 'content';
|
||||||
|
@import 'filters';
|
||||||
|
@import 'howto';
|
||||||
|
@import 'header';
|
||||||
|
@import 'menu-left';
|
||||||
|
@import 'menu-right';
|
||||||
|
@import 'skills';
|
||||||
114
src/styles/components/content.scss
Normal file
114
src/styles/components/content.scss
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
.backlink {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 2rem 0 0 2rem;
|
||||||
|
@include icon('arrow-left-circle');
|
||||||
|
color: #3d4057;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-route,
|
||||||
|
sib-link {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
// group
|
||||||
|
|
||||||
|
#group-profile {
|
||||||
|
sib-display-div[name='name'] div {
|
||||||
|
@extend h1;
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-display-div[name='label-description'] div {
|
||||||
|
@extend h2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// chat
|
||||||
|
|
||||||
|
.chat-view {
|
||||||
|
padding: 1.7rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
@include window-style-modal();
|
||||||
|
height: calc(100vh - 104px);
|
||||||
|
|
||||||
|
> sib-chat {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#member-profile {
|
||||||
|
@include media('width>tablet') {
|
||||||
|
div[name='header'] {
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div[name='name'] {
|
||||||
|
@extend h1;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 0.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-link[next='member-chat'] {
|
||||||
|
border-style: solid;
|
||||||
|
display: flex;
|
||||||
|
border-radius: 25px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: $color-244-73-62;
|
||||||
|
color: $color-244-73-62;
|
||||||
|
padding: 1.7rem;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
|
||||||
|
div[name='pseudonym'] {
|
||||||
|
margin-top: -1.7rem;
|
||||||
|
margin-bottom: 1.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#member-info {
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-form {
|
||||||
|
|
||||||
|
form > * {
|
||||||
|
margin-top: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// button like
|
||||||
|
input[type='color'],
|
||||||
|
input[type='file'],
|
||||||
|
input[type='reset'],
|
||||||
|
input[type='submit'] {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.85rem 2.55rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: 100em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type='reset'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -14,7 +14,7 @@
|
|||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
border-style: none;
|
border-style: none;
|
||||||
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
|
box-shadow: 0 0 5px 0 rgba(133, 140, 148, 0.09);
|
||||||
color: $color-taupe-gray;
|
color: $color-210-5-56;
|
||||||
font-size: 1.36rem;
|
font-size: 1.36rem;
|
||||||
line-height: 1.80;
|
line-height: 1.80;
|
||||||
margin-top: 1.36rem;
|
margin-top: 1.36rem;
|
||||||
@ -27,7 +27,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
background: $color-white;
|
background: $color-0-0-100;
|
||||||
background-image: url("/images/chevron-down.png");
|
background-image: url("/images/chevron-down.png");
|
||||||
background-position: right 12px top 60%;
|
background-position: right 12px top 60%;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
@ -1,31 +1,26 @@
|
|||||||
|
@include style-template-fieldset('fee');
|
||||||
|
@include style-template-fieldset('customer');
|
||||||
|
@include style-template-fieldset('team');
|
||||||
|
|
||||||
.frame-form {
|
.frame-form {
|
||||||
|
&.full-wide {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
font-size: 1.5rem;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 6.8rem 8.5rem 10.2rem;
|
padding: 6.8rem 8.5rem 10.2rem;
|
||||||
@extend %frame;
|
background: $color-0-0-100;
|
||||||
|
}
|
||||||
|
|
||||||
.form-view {
|
.form-view {
|
||||||
border-bottom: 1px solid $color-platinum;
|
border-bottom: 1px solid $color-210-17-91;
|
||||||
padding-bottom: 2.55rem;
|
padding-bottom: 2.55rem;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@include styleTemplateFieldset('fee');
|
|
||||||
@include styleTemplateFieldset('customer');
|
|
||||||
@include styleTemplateFieldset('team');
|
|
||||||
|
|
||||||
#circle-create,
|
|
||||||
#circle-edit,
|
|
||||||
#job-offer-create,
|
|
||||||
#project-create,
|
|
||||||
#project-edit {
|
|
||||||
flex: 1;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@ -49,9 +44,9 @@
|
|||||||
input {
|
input {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: $color-glitter;
|
background: $color-222-57-95;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -69,14 +64,21 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
> label {
|
> label {
|
||||||
@extend %label;
|
color: $color-244-10-70;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 2em 0 0.5em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
select,
|
select,
|
||||||
textarea {
|
textarea {
|
||||||
background: $color-glitter;
|
background: $color-222-57-95;
|
||||||
border: none;
|
border: none;
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@ -97,7 +99,7 @@
|
|||||||
sib-form-multiple-dropdown {
|
sib-form-multiple-dropdown {
|
||||||
|
|
||||||
label {
|
label {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
text-transform: initial;
|
text-transform: initial;
|
||||||
}
|
}
|
||||||
@ -119,7 +121,7 @@
|
|||||||
/*@extend %skill;*/
|
/*@extend %skill;*/
|
||||||
|
|
||||||
button.choices__button {
|
button.choices__button {
|
||||||
border-left: 1px solid $color-selective-yellow;
|
border-left: 1px solid $color-43-100-50;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
}
|
}
|
||||||
@ -142,7 +144,7 @@
|
|||||||
margin-top: 2em;
|
margin-top: 2em;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
border: 2px solid $color-taupe-gray;
|
border: 2px solid $color-210-5-56;
|
||||||
content: '';
|
content: '';
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -155,8 +157,8 @@
|
|||||||
|
|
||||||
&:checked {
|
&:checked {
|
||||||
&:before {
|
&:before {
|
||||||
border: 2px solid $color-taupe-gray;
|
border: 2px solid $color-210-5-56;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
left: 0;
|
left: 0;
|
||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
@ -169,7 +171,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
background: $color-white;
|
background: $color-0-0-100;
|
||||||
content: '';
|
content: '';
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -198,10 +200,10 @@
|
|||||||
|
|
||||||
button {
|
button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 2.55rem;
|
font-size: 2.55rem;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
@ -226,7 +228,11 @@
|
|||||||
|
|
||||||
input[type='submit'] {
|
input[type='submit'] {
|
||||||
margin-top: 6rem;
|
margin-top: 6rem;
|
||||||
@extend %submit-form;
|
background-color: $color-233-18-29;
|
||||||
|
color: $color-0-0-100;
|
||||||
|
float: right;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -271,10 +277,10 @@ sib-multiple-form[name='members'] {
|
|||||||
|
|
||||||
button {
|
button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 2.55rem;
|
font-size: 2.55rem;
|
||||||
height: 1em;
|
height: 1em;
|
||||||
@ -1,8 +1,8 @@
|
|||||||
|
|
||||||
#header {
|
#header {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -15,15 +15,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#button-toggle {
|
|
||||||
color: $color-dark-lava;
|
|
||||||
cursor: pointer;
|
|
||||||
display: none;
|
|
||||||
font-size: 3.2rem;
|
|
||||||
padding: 2.3rem;
|
|
||||||
@include icon('menu');
|
|
||||||
}
|
|
||||||
|
|
||||||
#logo {
|
#logo {
|
||||||
flex: 1 1 0;
|
flex: 1 1 0;
|
||||||
}
|
}
|
||||||
@ -34,14 +25,14 @@
|
|||||||
#search-input {
|
#search-input {
|
||||||
border-radius: 10em;
|
border-radius: 10em;
|
||||||
padding: 0.64rem 1.28rem;
|
padding: 0.64rem 1.28rem;
|
||||||
border: 1px solid $color-bombay;
|
border: 1px solid $color-215-9-73;
|
||||||
height: 3.8rem;
|
height: 3.8rem;
|
||||||
width: 28rem;
|
width: 28rem;
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
|
|
||||||
& ~ #close-search-icon,
|
& ~ #close-search-icon,
|
||||||
& ~ #search-icon {
|
& ~ #search-icon {
|
||||||
color: $color-bombay;
|
color: $color-215-9-73;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.7rem;
|
font-size: 1.7rem;
|
||||||
margin: auto;
|
margin: auto;
|
||||||
@ -49,7 +40,7 @@
|
|||||||
right: 3.7rem;
|
right: 3.7rem;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
transform: translateY(-50%);
|
transform: translateY(-50%);
|
||||||
-webkit-text-stroke: 1px $color-bombay;
|
-webkit-text-stroke: 1px $color-215-9-73;
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ #close-search-icon {
|
& ~ #close-search-icon {
|
||||||
@ -115,8 +106,8 @@ details {
|
|||||||
details#user-controls {
|
details#user-controls {
|
||||||
|
|
||||||
summary:focus {
|
summary:focus {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -160,7 +151,7 @@ details#user-controls {
|
|||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
> nav {
|
> nav {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
box-shadow: 0 7px 8px 0 rgba(0, 0, 0, 0.16);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -178,14 +169,14 @@ details#user-controls {
|
|||||||
padding: 1.6rem 1.3rem;
|
padding: 1.6rem 1.3rem;
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $color-text-base;
|
color: $color-213-4-50;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: $color-text-base;
|
color: $color-213-4-50;
|
||||||
padding: 1.6rem 1.3rem;
|
padding: 1.6rem 1.3rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -194,8 +185,8 @@ details#user-controls {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&[open] {
|
&[open] {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
|
|
||||||
#user-controls__profile {
|
#user-controls__profile {
|
||||||
|
|
||||||
17
src/styles/components/howto.scss
Normal file
17
src/styles/components/howto.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
.howto {
|
||||||
|
padding: 0.85rem;
|
||||||
|
margin-bottom: 1.7rem;
|
||||||
|
margin-left: 8.5rem;
|
||||||
|
flex-basis: auto;
|
||||||
|
border-radius: 2em;
|
||||||
|
|
||||||
|
div[class*="icon-"] {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 0;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3
src/styles/components/icons/_index.scss
Normal file
3
src/styles/components/icons/_index.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
@import 'custom-icons';
|
||||||
|
@import 'icons';
|
||||||
|
@import 'material-design-icons';
|
||||||
@ -1,14 +1,10 @@
|
|||||||
#navbar {
|
#navbar {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
display: block;
|
display: block;
|
||||||
flex: 0 0 16em;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
flex: 0 0 16em;
|
||||||
transition: flex-basis 0.5s ease-in-out;
|
transition: flex-basis 0.5s ease-in-out;
|
||||||
// max-width: 16rem;
|
|
||||||
// position: relative;
|
|
||||||
// min-height: 100%;
|
|
||||||
|
|
||||||
&.open {
|
&.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
@ -35,18 +31,17 @@
|
|||||||
padding: 1.6rem;
|
padding: 1.6rem;
|
||||||
|
|
||||||
&[active] {
|
&[active] {
|
||||||
background-color: $color-mustard;
|
background-color: $color-46-100-67;
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
|
|
||||||
.menu-icon:before {
|
.menu-icon:before {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-white;
|
color: $color-0-0-100;
|
||||||
// transform: perspective(1000px) translateZ(1px) scale(0.8);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-notification > sib-display > div:first-child {
|
.menu-notification > sib-display > div:first-child {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-mustard;
|
color: $color-46-100-67;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -64,9 +59,6 @@
|
|||||||
height: 1.9em;
|
height: 1.9em;
|
||||||
line-height: 1.9em;
|
line-height: 1.9em;
|
||||||
width: 1.9em;
|
width: 1.9em;
|
||||||
// transform: perspective(1000px) translateZ(1px) scale(1);
|
|
||||||
// will-change: transform;
|
|
||||||
// transition: all 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.4);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,26 +74,9 @@
|
|||||||
width: 8em;
|
width: 8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Fix: presque doublon avec main.scss ligne 71 qui gère le nombre de notifications sur la cloche */
|
|
||||||
.menu-notification {
|
|
||||||
align-self: center;
|
|
||||||
display: flex;
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
justify-content: center;
|
|
||||||
width: 2em;
|
|
||||||
|
|
||||||
> sib-display {
|
|
||||||
|
|
||||||
> div:first-of-type {
|
|
||||||
@extend %notification;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-chevron {
|
.menu-chevron {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: $color-spun-pearl;
|
color: $color-244-10-70;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@ -118,7 +93,7 @@
|
|||||||
padding-left: 2.88rem;
|
padding-left: 2.88rem;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
color: $color-spun-pearl;
|
color: $color-244-10-70;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding-bottom: 1.12rem;
|
padding-bottom: 1.12rem;
|
||||||
|
|
||||||
@ -138,24 +113,8 @@
|
|||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
height: 1px;
|
height: 1px;
|
||||||
background-color: $color-gainsboro-a02;
|
background-color: $color-213-13-86;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media('width<phone') {
|
|
||||||
#button-toggle {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#navbar {
|
|
||||||
//transform: translateX(-120%);
|
|
||||||
transition: flex-basis 0.5s ease-in-out;
|
|
||||||
flex-basis: 0;
|
|
||||||
//position: absolute;
|
|
||||||
//top: auto;
|
|
||||||
//display: none;
|
|
||||||
//z-index: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,4 +1,27 @@
|
|||||||
#mainContainer {
|
#mainContainer {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
flex-shrink: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
|
||||||
|
>div#project,
|
||||||
|
>div#circle {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
align-items: stretch;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
.views-container {
|
||||||
|
flex: 1 0 0;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
>div {
|
||||||
|
transition: all 0.5s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
>div {
|
>div {
|
||||||
|
|
||||||
@ -7,7 +30,7 @@
|
|||||||
|
|
||||||
>sib-router {
|
>sib-router {
|
||||||
background-color: $color-222-52-90;
|
background-color: $color-222-52-90;
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
@ -19,7 +42,7 @@
|
|||||||
|
|
||||||
li {
|
li {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-bottom: 1px solid $color-lavender-gray;
|
border-bottom: 1px solid $color-229-25-79;
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2.55rem 2.55rem;
|
padding: 2.55rem 2.55rem;
|
||||||
@ -41,8 +64,8 @@
|
|||||||
>sib-route {
|
>sib-route {
|
||||||
|
|
||||||
&[active] {
|
&[active] {
|
||||||
background-color: $color-purple-dark;
|
background-color: $color-233-18-29;
|
||||||
color: $color-mustard;
|
color: $color-46-100-67;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -80,7 +103,7 @@
|
|||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
& ~ #views-container {
|
&~.views-container {
|
||||||
margin-left: -15.5rem;
|
margin-left: -15.5rem;
|
||||||
transform: translate(15.5rem);
|
transform: translate(15.5rem);
|
||||||
}
|
}
|
||||||
18
src/styles/components/skills.scss
Normal file
18
src/styles/components/skills.scss
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
/* TEMPLATE SKILLS*/
|
||||||
|
|
||||||
|
sib-multiple[name*='skills'] {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill {
|
||||||
|
background-color: $color-43-100-50;
|
||||||
|
border: 1px solid $color-43-100-50;
|
||||||
|
border-radius: 2em;
|
||||||
|
color: $color-0-0-100;
|
||||||
|
display: block;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 0.4rem 1rem 0.4rem 0;
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
}
|
||||||
@ -1,191 +0,0 @@
|
|||||||
// job offers
|
|
||||||
// .new-job-offer {
|
|
||||||
// @extend %button;
|
|
||||||
// text-transform: uppercase;
|
|
||||||
// margin-left: 1em;
|
|
||||||
// margin-bottom: 1em
|
|
||||||
// //float: right;
|
|
||||||
// }
|
|
||||||
|
|
||||||
// skills
|
|
||||||
|
|
||||||
/*#member-profile sib-display-lookuplist {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li[name*='skills'] {
|
|
||||||
padding: 0.3em 1.2em;
|
|
||||||
border: 1px solid;
|
|
||||||
border-radius: 2em;
|
|
||||||
margin: 0.25em;
|
|
||||||
background-color: $color-selective-yellow;
|
|
||||||
color: $color-white;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
// group
|
|
||||||
|
|
||||||
#group-profile {
|
|
||||||
sib-display-div[name='name'] div {
|
|
||||||
@extend h1;
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-display-div[name='label-description'] div {
|
|
||||||
@extend h2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// chat
|
|
||||||
|
|
||||||
.chat-view {
|
|
||||||
padding: 1.7rem;
|
|
||||||
position: relative;
|
|
||||||
z-index: 0;
|
|
||||||
@extend %frame;
|
|
||||||
height: calc(100vh - 104px);
|
|
||||||
|
|
||||||
> sib-chat {
|
|
||||||
@include pos();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// member-profile && members
|
|
||||||
|
|
||||||
/*.members-list-condensed {
|
|
||||||
img {
|
|
||||||
width: 50px;
|
|
||||||
height: 100px;
|
|
||||||
border-radius: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
object-position: top;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> div > sib-display > div {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 0.5fr 2fr;
|
|
||||||
grid-template-rows: repeat(3, auto);
|
|
||||||
grid-column-gap: 3rem;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
div[name="teammate-img"] {
|
|
||||||
background: blue;
|
|
||||||
grid-row: 1 / -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
ul{
|
|
||||||
margin-top: 0px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
>[name$="user"]{
|
|
||||||
color: $color-dark-lava;
|
|
||||||
}
|
|
||||||
>[name$="avatar"]{
|
|
||||||
grid-column-start: first;
|
|
||||||
grid-column-end: middle;
|
|
||||||
grid-row-start: first;
|
|
||||||
grid-row-end: end;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ul {
|
|
||||||
// padding-left: 1em;
|
|
||||||
// }
|
|
||||||
}*/
|
|
||||||
|
|
||||||
hdapp-available {
|
|
||||||
display: block;
|
|
||||||
text-align: right;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
@extend %button;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*#member-profile {
|
|
||||||
ul {
|
|
||||||
@include list-reset();
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
#member-profile {
|
|
||||||
@include media('width>tablet') {
|
|
||||||
div[name='header'] {
|
|
||||||
float: left;
|
|
||||||
width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div[name='name'] {
|
|
||||||
@extend h1;
|
|
||||||
|
|
||||||
div {
|
|
||||||
display: inline-block;
|
|
||||||
margin-right: 0.7rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-link[next='member-chat'] {
|
|
||||||
border-style: solid;
|
|
||||||
display: flex;
|
|
||||||
border-radius: 25px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: $color-majorelle-blue;
|
|
||||||
color: $color-majorelle-blue;
|
|
||||||
padding: 1.7rem;
|
|
||||||
text-decoration:none;
|
|
||||||
}
|
|
||||||
|
|
||||||
div[name='pseudonym'] {
|
|
||||||
margin-top: -1.7rem;
|
|
||||||
margin-bottom: 1.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#member-info {
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
display: block;
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-form {
|
|
||||||
|
|
||||||
form > * {
|
|
||||||
margin-top: 0.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
// button like
|
|
||||||
input[type='color'],
|
|
||||||
input[type='file'],
|
|
||||||
input[type='reset'],
|
|
||||||
input[type='submit'] {
|
|
||||||
@extend %button;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type='reset'] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
label {
|
|
||||||
@extend h2;
|
|
||||||
&:after {
|
|
||||||
content: ':';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
@ -1,28 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
@import '../../node_modules/include-media/dist/include-media';
|
|
||||||
@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
|
|
||||||
@import 'icons/custom-icons';
|
|
||||||
@import 'icons/icons';
|
|
||||||
@import 'icons/material-design-icons';
|
|
||||||
|
|
||||||
@import 'variables';
|
|
||||||
@import 'mixins';
|
|
||||||
@import 'main';
|
|
||||||
@import 'form';
|
|
||||||
@import 'content';
|
|
||||||
|
|
||||||
@import 'filters';
|
|
||||||
@import 'right-panel';
|
|
||||||
|
|
||||||
@import 'group-profile';
|
|
||||||
@import 'job-offers';
|
|
||||||
@import 'member-profile';
|
|
||||||
@import 'members';
|
|
||||||
@import 'project-profile';
|
|
||||||
@import 'member-chat';
|
|
||||||
|
|
||||||
// @import 'members';
|
|
||||||
@import 'header';
|
|
||||||
@import 'menu-left';
|
|
||||||
@import 'menu-right';
|
|
||||||
@ -1,134 +0,0 @@
|
|||||||
#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: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
> sib-display {
|
|
||||||
@extend %frame;
|
|
||||||
display: block;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 1.7rem 0;
|
|
||||||
padding: 3.4rem;
|
|
||||||
/*&:nth-child(odd) {
|
|
||||||
background-color: $color-anti-flash-white;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
[name='user-thumb'] {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
margin: -0.25em;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='author.first_name'] {
|
|
||||||
color: $color-quartz;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-multiple[name$='groups'] {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> * {
|
|
||||||
@extend %group;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-display-img {
|
|
||||||
background-color: $color-white;
|
|
||||||
border-radius: 50%;
|
|
||||||
height: 4.25rem;
|
|
||||||
overflow: hidden;
|
|
||||||
position: relative;
|
|
||||||
width: 4.25rem;
|
|
||||||
|
|
||||||
img {
|
|
||||||
height: 100%;
|
|
||||||
left: 0;
|
|
||||||
object-fit: cover;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='creationDate'] {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 0.7rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='title'] {
|
|
||||||
@extend h3;
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
line-height: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='description'] {
|
|
||||||
display: block;
|
|
||||||
line-height: 1.6;
|
|
||||||
margin-bottom: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='skills'] {
|
|
||||||
label {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='send'] {
|
|
||||||
color: $color-majorelle-blue;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
float: right;
|
|
||||||
|
|
||||||
> sib-link {
|
|
||||||
cursor: pointer;
|
|
||||||
@include icon('speech');
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-right: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[name='status'] {
|
|
||||||
float: right;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin: -0.25em;
|
|
||||||
|
|
||||||
> * {
|
|
||||||
margin: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
@extend %status-open;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
1
src/styles/layout/circle-profile/_index.scss
Normal file
1
src/styles/layout/circle-profile/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'circle-profile';
|
||||||
@ -31,7 +31,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> div[name='teammate-img'] {
|
> div[name='teammate-img'] {
|
||||||
background-color: $color-bombay;
|
background-color: $color-215-9-73;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
@ -61,7 +61,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> sib-display-value[name='teammate-profile'] {
|
> sib-display-value[name='teammate-profile'] {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
grid-column: 1 / span 2;
|
grid-column: 1 / span 2;
|
||||||
@ -69,7 +69,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> sib-display-value[name='teammate-contact'] {
|
> sib-display-value[name='teammate-contact'] {
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
justify-self: stretch;
|
justify-self: stretch;
|
||||||
grid-column: 3 / span 2;
|
grid-column: 3 / span 2;
|
||||||
1
src/styles/layout/job-offers/_index.scss
Normal file
1
src/styles/layout/job-offers/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'job-offers.scss';
|
||||||
163
src/styles/layout/job-offers/job-offers.scss
Normal file
163
src/styles/layout/job-offers/job-offers.scss
Normal file
@ -0,0 +1,163 @@
|
|||||||
|
#job-offers {
|
||||||
|
|
||||||
|
.plus-button {
|
||||||
|
@extend .howto;
|
||||||
|
background-color: $color-43-100-50;
|
||||||
|
color: $color-0-0-100;
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.icon-plus {
|
||||||
|
font-size: 20px;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0.5rem 0.5rem 0.5rem 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#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: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
>sib-display {
|
||||||
|
@include window-style-modal();
|
||||||
|
display: block;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin: 1.7rem 0;
|
||||||
|
padding: 3.4rem;
|
||||||
|
/*&:nth-child(odd) {
|
||||||
|
background-color: $color-210-25-95;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
[name='user-thumb'] {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
margin: -0.25em;
|
||||||
|
|
||||||
|
>* {
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='author.first_name'] {
|
||||||
|
color: $color-0-0-29;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-multiple[name$='groups'] {
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
>* {
|
||||||
|
@extend %user-role;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
sib-display-img {
|
||||||
|
background-color: $color-0-0-100;
|
||||||
|
border-radius: 50%;
|
||||||
|
height: 4.25rem;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
width: 4.25rem;
|
||||||
|
|
||||||
|
img {
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
object-fit: cover;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='creationDate'] {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 0.7rem;
|
||||||
|
margin-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='title'] {
|
||||||
|
@extend h3;
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 19px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='description'] {
|
||||||
|
display: block;
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='skills'] {
|
||||||
|
label {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='send'] {
|
||||||
|
color: $color-244-73-62;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
float: right;
|
||||||
|
|
||||||
|
>sib-link {
|
||||||
|
cursor: pointer;
|
||||||
|
@include icon('speech');
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-right: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[name='status'] {
|
||||||
|
float: right;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: -0.25em;
|
||||||
|
|
||||||
|
>* {
|
||||||
|
margin: 0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
background-color: $color-244-73-62;
|
||||||
|
border: none;
|
||||||
|
border-radius: 100em;
|
||||||
|
color: $color-0-0-100;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: 0.85rem 1.7rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
1
src/styles/layout/member-chat/_index.scss
Normal file
1
src/styles/layout/member-chat/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'member-chat.scss';
|
||||||
2
src/styles/layout/members/_index.scss
Normal file
2
src/styles/layout/members/_index.scss
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
@import 'members';
|
||||||
|
@import 'member-profile';
|
||||||
@ -3,25 +3,14 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
|
|
||||||
.backlink {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin: 2rem 0 0 2rem;
|
|
||||||
@extend %backlink;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
font-size: 2rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#member-info {
|
#member-info {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||||
margin: 2rem 1rem 5rem 2rem;
|
margin: 2rem 1rem 5rem 2rem;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
div[name='member-profile__bio'] {
|
div[name='member-profile__bio'] {
|
||||||
border-bottom: 1px solid $color-link-water;
|
border-bottom: 1px solid $color-221-51-90;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-areas: "avatar name status"
|
grid-template-areas: "avatar name status"
|
||||||
"avatar pseudo status"
|
"avatar pseudo status"
|
||||||
@ -49,7 +38,7 @@
|
|||||||
grid-area: name;
|
grid-area: name;
|
||||||
|
|
||||||
> sib-display-value[name^='user.'] {
|
> sib-display-value[name^='user.'] {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@extend h1;
|
@extend h1;
|
||||||
}
|
}
|
||||||
@ -80,7 +69,7 @@
|
|||||||
|
|
||||||
member-status[name$='available']{
|
member-status[name$='available']{
|
||||||
align-self: flex-end;
|
align-self: flex-end;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
grid-area: status;
|
grid-area: status;
|
||||||
justify-self: flex-end;
|
justify-self: flex-end;
|
||||||
|
|
||||||
@ -97,7 +86,7 @@
|
|||||||
@include ci('awareness');
|
@include ci('awareness');
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom: 2px solid $color-selective-yellow;
|
border-bottom: 2px solid $color-43-100-50;
|
||||||
font-size: 7.3rem;
|
font-size: 7.3rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -107,7 +96,7 @@
|
|||||||
@include ci('armor');
|
@include ci('armor');
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-bottom: 2px solid $color-selective-yellow;
|
border-bottom: 2px solid $color-43-100-50;
|
||||||
font-size: 7.3rem;
|
font-size: 7.3rem;
|
||||||
padding-bottom: 1.5rem;
|
padding-bottom: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -122,9 +111,9 @@
|
|||||||
|
|
||||||
[next=member-chat] {
|
[next=member-chat] {
|
||||||
@include icon('speech');
|
@include icon('speech');
|
||||||
border: 1px solid $color-majorelle-blue;
|
border: 1px solid $color-244-73-62;
|
||||||
border-radius: 2em;
|
border-radius: 2em;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
@ -1,3 +1,51 @@
|
|||||||
|
%member-info {
|
||||||
|
|
||||||
|
sib-multiple[name^='user.'],
|
||||||
|
> member-info > div,
|
||||||
|
> sib-display-value {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-bottom: 0;
|
||||||
|
margin-top: 1.7rem;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
color: $color-43-100-50;
|
||||||
|
padding: 0 0.6em 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
[name$='city'] * {
|
||||||
|
@include mdi('atom');
|
||||||
|
}
|
||||||
|
|
||||||
|
[name$='email'] * {
|
||||||
|
@include mdi('email-outline');
|
||||||
|
}
|
||||||
|
|
||||||
|
[name$='phone'] * {
|
||||||
|
@include mdi('cellphone-iphone');
|
||||||
|
}
|
||||||
|
|
||||||
|
[name="foaf:homepage"]:not(:empty) {
|
||||||
|
@include mdi('link-variant');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.how-link {
|
||||||
|
@extend .howto;
|
||||||
|
background-color: $color-0-0-100;
|
||||||
|
color: $color-216-4-22;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
.icon-idea {
|
||||||
|
background-color: $color-46-100-67;
|
||||||
|
border-radius: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 1.2rem;
|
||||||
|
width: 1.8em;
|
||||||
|
height: 1.8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#members-list {
|
#members-list {
|
||||||
@extend .grid-layer;
|
@extend .grid-layer;
|
||||||
|
|
||||||
@ -11,15 +59,15 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
button {
|
button {
|
||||||
color: $color-anti-flash-white;
|
color: $color-210-25-95;
|
||||||
|
|
||||||
&:before {
|
&:before {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
@include icon('arrow-left-circle');
|
@include icon('arrow-left-circle');
|
||||||
}
|
}
|
||||||
|
|
||||||
&:disabled::before {
|
&:disabled::before {
|
||||||
color: $color-manatee;
|
color: $color-215-6-63;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -53,14 +101,14 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
color: $color-quartz;
|
color: $color-0-0-29;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin: 3.75rem 0;
|
margin: 3.75rem 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
border-top: 1px solid $color-timberwolf;
|
border-top: 1px solid $color-0-0-85;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
content: '';
|
content: '';
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -73,7 +121,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
span {
|
span {
|
||||||
background-color: $color-anti-flash-white;
|
background-color: $color-210-25-95;
|
||||||
padding: 0 60px;
|
padding: 0 60px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -81,7 +129,7 @@
|
|||||||
> sib-display {
|
> sib-display {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
|
||||||
color: $color-rolling-stone;
|
color: $color-210-4-50;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
@ -110,7 +158,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
div[name='header'] {
|
div[name='header'] {
|
||||||
border-bottom: 1px solid $color-anti-flash-white;
|
border-bottom: 1px solid $color-210-25-95;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 0.85rem 0 3.4rem;
|
padding: 0.85rem 0 3.4rem;
|
||||||
@ -122,7 +170,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
member-picture {
|
member-picture {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 28vh;
|
height: 28vh;
|
||||||
margin: 1.7rem auto;
|
margin: 1.7rem auto;
|
||||||
@ -157,9 +205,9 @@
|
|||||||
|
|
||||||
[next=member-chat] {
|
[next=member-chat] {
|
||||||
align-self: center;
|
align-self: center;
|
||||||
border: 1px solid $color-majorelle-blue;
|
border: 1px solid $color-244-73-62;
|
||||||
border-radius: 3.4rem;
|
border-radius: 3.4rem;
|
||||||
color: $color-majorelle-blue;
|
color: $color-244-73-62;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 1rem 2.55rem 0.7rem;
|
padding: 1rem 2.55rem 0.7rem;
|
||||||
1
src/styles/layout/project-profile/_index.scss
Normal file
1
src/styles/layout/project-profile/_index.scss
Normal file
@ -0,0 +1 @@
|
|||||||
|
@import 'project-profile'
|
||||||
@ -19,12 +19,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
[name='block-title'] {
|
[name='block-title'] {
|
||||||
border-bottom: 1px solid $color-link-water;
|
border-bottom: 1px solid $color-221-51-90;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding-bottom: 3.4rem;
|
padding-bottom: 3.4rem;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
color: $color-dark-lava;
|
color: $color-216-4-22;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding-right: 0.85rem;
|
padding-right: 0.85rem;
|
||||||
@ -40,7 +40,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> :nth-child(5) {
|
> :nth-child(5) {
|
||||||
color: $color-purple-dark;
|
color: $color-233-18-29;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
}
|
}
|
||||||
@ -50,7 +50,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
> :nth-last-child(-n+2) {
|
> :nth-last-child(-n+2) {
|
||||||
color: $color-text-base;
|
color: $color-213-4-50;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: none;
|
text-transform: none;
|
||||||
@ -105,7 +105,7 @@
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
border: 1px solid $color-link-water;
|
border: 1px solid $color-221-51-90;
|
||||||
flex: 1 1 auto;
|
flex: 1 1 auto;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin: 0 -0.1rem -0.1rem 0;
|
margin: 0 -0.1rem -0.1rem 0;
|
||||||
@ -158,7 +158,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
color: $color-selective-yellow;
|
color: $color-43-100-50;
|
||||||
font-size: 2.2rem;
|
font-size: 2.2rem;
|
||||||
padding: 0 1rem 0 0;
|
padding: 0 1rem 0 0;
|
||||||
}
|
}
|
||||||
@ -187,7 +187,7 @@
|
|||||||
grid-row: 1 / span 2;
|
grid-row: 1 / span 2;
|
||||||
|
|
||||||
div {
|
div {
|
||||||
background-color: $color-white;
|
background-color: $color-0-0-100;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
height: 7vh;
|
height: 7vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -223,7 +223,7 @@
|
|||||||
margin-left: 1rem;
|
margin-left: 1rem;
|
||||||
|
|
||||||
sib-multiple [name='name'] {
|
sib-multiple [name='name'] {
|
||||||
@extend %group;
|
@extend %user-role;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,332 +0,0 @@
|
|||||||
[hidden],
|
|
||||||
.hidden,
|
|
||||||
.is-hidden {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
:root {
|
|
||||||
font-size: 62.5%;
|
|
||||||
font-family: Open Sans, sans-serif;
|
|
||||||
--sib-notifications-theme: #{$color-46-100-50};
|
|
||||||
|
|
||||||
body {
|
|
||||||
/*Will help to make .content fit your height screen size. Part.1*/
|
|
||||||
background-color: $color-anti-flash-white;
|
|
||||||
color: $color-text-base;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
height: 100vh;
|
|
||||||
margin: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
color: $color-dark-lava;
|
|
||||||
font-weight: 600;
|
|
||||||
padding: 0;
|
|
||||||
/*margin: 0.67em 0;*/
|
|
||||||
|
|
||||||
span {
|
|
||||||
font-weight: 400;
|
|
||||||
padding-left: 0.85rem;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '// ';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 { font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.debug {
|
|
||||||
outline: 2px dotted red;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
text-decoration: none;
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style: none;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#job-offers,
|
|
||||||
#members {
|
|
||||||
@extend %content-padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.frame {
|
|
||||||
@extend %frame;
|
|
||||||
padding: 5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.layer {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
#content {
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
|
|
||||||
#mainContainer {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.limiter {
|
|
||||||
display: block;
|
|
||||||
max-width: 650px;
|
|
||||||
}
|
|
||||||
/* sub menu (right menu) */
|
|
||||||
#mainContainer {
|
|
||||||
display: flex;
|
|
||||||
> div#project,
|
|
||||||
> div#circle {
|
|
||||||
flex-grow: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
align-items: stretch;
|
|
||||||
overflow-x: hidden;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
transition: all 0.5s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-route,
|
|
||||||
sib-link {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
sib-link.back {
|
|
||||||
color: $color-purple-dark;
|
|
||||||
display: block;
|
|
||||||
font-size: 2rem;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerH {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerV {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grow {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fix {
|
|
||||||
flex-grow: 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.containerCenter {
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reverse {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
#views-container {
|
|
||||||
flex: 1 0 0;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grid-layer{
|
|
||||||
display: grid;
|
|
||||||
font-size: 16px;
|
|
||||||
grid-template-columns: [start]auto[middle]25%[end];
|
|
||||||
grid-template-rows: [start]7em[middle]auto[end];
|
|
||||||
}
|
|
||||||
.grid-layer-main {
|
|
||||||
grid-column-start: start;
|
|
||||||
grid-column-end: end;
|
|
||||||
grid-row-start: start;
|
|
||||||
grid-row-end: end;
|
|
||||||
}
|
|
||||||
.grid-layer-links {
|
|
||||||
grid-column-start: middle;
|
|
||||||
grid-column-end: end;
|
|
||||||
grid-row-start: start;
|
|
||||||
grid-row-end: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* TEMPLATE SKILLS*/
|
|
||||||
|
|
||||||
sib-multiple[name*='skills'] {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill {
|
|
||||||
background-color: $color-selective-yellow;
|
|
||||||
border: 1px solid $color-selective-yellow;
|
|
||||||
border-radius: 2em;
|
|
||||||
color: $color-white;
|
|
||||||
display: block;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: bold;
|
|
||||||
margin: 0.4rem 1rem 0.4rem 0;
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
member-info-groups {
|
|
||||||
@extend %group;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* NEW RESPONSIVE */
|
|
||||||
|
|
||||||
.right-sidebar {
|
|
||||||
overflow: hidden;
|
|
||||||
transition: width 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-sidebar.js-right-sidebar-expanded {
|
|
||||||
width: 130px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-sidebar.js-right-sidebar-collapsed {
|
|
||||||
width: 62px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*Define the basic row-column properties that construct the foundation*/
|
|
||||||
.row {
|
|
||||||
display: flex;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
/*Will help to make .content fit your height screen size. Part 2*/
|
|
||||||
flex-direction: row;
|
|
||||||
height: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block-grid {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dividing into columns */
|
|
||||||
@mixin respond-to($breakpoint) {
|
|
||||||
|
|
||||||
@if map-has-key($breakpoints, $breakpoint) {
|
|
||||||
|
|
||||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
|
||||||
@content;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@else {
|
|
||||||
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
|
|
||||||
+ "Available breakpoints are: #{map-keys($breakpoints)}.";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-2 {
|
|
||||||
|
|
||||||
@include respond-to('phone'){
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 calc(100% / 12 * 2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-shrink {
|
|
||||||
|
|
||||||
@include respond-to('phone') {
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.medium-auto {
|
|
||||||
|
|
||||||
@include respond-to('tablet') {
|
|
||||||
display: block;
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-12 {
|
|
||||||
|
|
||||||
@include respond-to('phone') {
|
|
||||||
display: block;
|
|
||||||
flex: 0 1 calc(100% / 12 * 12);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.small-auto {
|
|
||||||
|
|
||||||
@include respond-to ('phone') {
|
|
||||||
display: block;
|
|
||||||
flex: 1;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
@charset "UTF-8";
|
|
||||||
@mixin debug {
|
|
||||||
$hsla: hsla(random(360), 100%, 50%, 0.3);
|
|
||||||
background-color: $hsla;
|
|
||||||
}
|
|
||||||
@mixin log($v) {
|
|
||||||
font-family: '__log__:#{$v}';
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin offset($corner: 1, $x: 0, $y: 0) {
|
|
||||||
// corner:
|
|
||||||
// 1-----2
|
|
||||||
// | |
|
|
||||||
// | |
|
|
||||||
// 3-----4
|
|
||||||
position: absolute;
|
|
||||||
@if ($corner == 1) {
|
|
||||||
top: $y;
|
|
||||||
left: $x;
|
|
||||||
}
|
|
||||||
@if ($corner == 2) {
|
|
||||||
top: $y;
|
|
||||||
right: $x;
|
|
||||||
}
|
|
||||||
@if ($corner == 3) {
|
|
||||||
bottom: $y;
|
|
||||||
left: $x;
|
|
||||||
}
|
|
||||||
@if ($corner == 4) {
|
|
||||||
bottom: $y;
|
|
||||||
right: $x;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin position($top: 0, $right: null, $bottom: null, $left: null) {
|
|
||||||
// --1--
|
|
||||||
// | |
|
|
||||||
// 4 2
|
|
||||||
// | |
|
|
||||||
// --3--
|
|
||||||
@if ($right == null) {
|
|
||||||
$right: $top;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if ($bottom == null) {
|
|
||||||
$bottom: $top;
|
|
||||||
}
|
|
||||||
|
|
||||||
@if ($left == null) {
|
|
||||||
$left: $right;
|
|
||||||
}
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: $top;
|
|
||||||
left: $left;
|
|
||||||
right: $right;
|
|
||||||
bottom: $bottom;
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin pos($pos: 5, $position: absolute) {
|
|
||||||
// ╔═──┐ ╔═══╗ ┌──═╗
|
|
||||||
// │ 1 │ │ 2 │ │ 3 │
|
|
||||||
// └───┘ └───┘ └───┘
|
|
||||||
// ╔═──┐ ╔═══╗ ┌──═╗
|
|
||||||
// ║ 4 │ ║ 5 ║ │ 6 ║
|
|
||||||
// ╚═──┘ ╚═══╝ └──═╝
|
|
||||||
// ┌───┐ ┌───┐ ┌───┐
|
|
||||||
// │ 7 │ │ 8 │ │ 9 │
|
|
||||||
// ╚═──┘ ╚═══╝ └──═╝
|
|
||||||
|
|
||||||
$mod: ($pos - 1) % 3;
|
|
||||||
|
|
||||||
position: $position;
|
|
||||||
@if ($pos <= 6) {
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
@if ($mod <= 1) {
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
@if ($mod >= 1) {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
@if ($pos >= 4) {
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// @mixin border-shadow($border: top, $size: 4px, $opacity: 0.05, $color: black) {
|
|
||||||
// &:after {
|
|
||||||
// content: '';
|
|
||||||
// position: absolute;
|
|
||||||
// top: if(($border == bottom), auto, 0);
|
|
||||||
// left: if(($border == right), auto, 0);
|
|
||||||
// right: if(($border == left), auto, 0);
|
|
||||||
// bottom: if(($border == top), auto, 0);
|
|
||||||
// background-image: linear-gradient(to #{$border}, $color, transparent);
|
|
||||||
// #{$border}: -$size;
|
|
||||||
// opacity: $opacity;
|
|
||||||
// @if ($border == top or $border == bottom) {
|
|
||||||
// height: $size;
|
|
||||||
// } @else {
|
|
||||||
// width: $size;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
@mixin align($horizontal: center, $vertical: middle) {
|
|
||||||
text-align: $horizontal;
|
|
||||||
white-space: nowrap;
|
|
||||||
&:after,
|
|
||||||
> * {
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: $vertical;
|
|
||||||
}
|
|
||||||
&:after {
|
|
||||||
content: '';
|
|
||||||
height: 100%;
|
|
||||||
width: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
> * {
|
|
||||||
//text-align:left;
|
|
||||||
white-space: normal;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin list-reset($deep: 0) {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
@if ($deep == 0) {
|
|
||||||
> li {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
} @else {
|
|
||||||
ul,
|
|
||||||
ol,
|
|
||||||
li {
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: block;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@mixin styleTemplateFieldset($name) {
|
|
||||||
template-legend-#{$name} {
|
|
||||||
border-bottom: 1px solid $color-link-water;
|
|
||||||
color: $color-purple-dark;
|
|
||||||
font-size: 1.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,50 +0,0 @@
|
|||||||
.right-link {
|
|
||||||
padding: 0.85rem;
|
|
||||||
margin-bottom: 1.7rem;
|
|
||||||
margin-left: 8.5rem;
|
|
||||||
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-dark-lava;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
.icon-idea {
|
|
||||||
background-color: $color-mustard;
|
|
||||||
border-radius: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
margin-right: 1.2rem;
|
|
||||||
//flex-direction: column;
|
|
||||||
width: 1.8em;
|
|
||||||
height: 1.8em;
|
|
||||||
//margin-right: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-link {
|
|
||||||
@extend .right-link;
|
|
||||||
background-color: $color-selective-yellow;
|
|
||||||
color: $color-white;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.icon-plus {
|
|
||||||
font-size: 20px;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0.5rem 0.5rem 0.5rem 0;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
//font-size: 1.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,150 +0,0 @@
|
|||||||
//Color Variables
|
|
||||||
$color-quartz: hsl(0, 0%, 29%);
|
|
||||||
$color-timberwolf: hsl(0, 0%, 85%);
|
|
||||||
$color-white: hsl(0, 0%,100%);
|
|
||||||
|
|
||||||
$color-selective-yellow: hsl(43, 100%, 50%);
|
|
||||||
$color-mikado-yellow: hsl(45, 95%, 54%);
|
|
||||||
$color-mustard: hsl(46, 100%, 67%);
|
|
||||||
$color-46-100-50: hsl(46, 100%, 50%);
|
|
||||||
|
|
||||||
$color-rolling-stone: hsl(210, 4%, 50%);
|
|
||||||
$color-taupe-gray: hsl(210, 5%, 56%);
|
|
||||||
$color-platinum: hsl(210, 17%, 91%);
|
|
||||||
$color-anti-flash-white: hsl(210, 25%, 95%);
|
|
||||||
$color-text-base: hsl(213, 4%, 50%);
|
|
||||||
$color-gainsboro: hsl(213, 13%, 86%);
|
|
||||||
$color-gainsboro-a02: hsla(213, 13%, 86%, 0.2);
|
|
||||||
$color-213-20-91: hsl(213, 20%, 91%);
|
|
||||||
$color-bombay: hsl(215, 9%, 73%);
|
|
||||||
$color-manatee: hsl(215, 6%, 63%);
|
|
||||||
$color-dark-lava: hsl(216, 4%, 22%);
|
|
||||||
$color-link-water: hsl(221, 51%, 90%);
|
|
||||||
$color-222-52-90: hsl(222, 52%, 90%);
|
|
||||||
$color-glitter: hsl(222, 57%, 95%);
|
|
||||||
$color-lavender-gray: hsl(229, 25%, 79%);
|
|
||||||
$color-purple-dark: hsl(233, 18%, 29%);
|
|
||||||
$color-spun-pearl: hsl(244, 10%, 70%);
|
|
||||||
$color-majorelle-blue: hsl(244, 73%, 62%);
|
|
||||||
|
|
||||||
%backlink {
|
|
||||||
@include icon('arrow-left-circle');
|
|
||||||
color: #3d4057;
|
|
||||||
text-decoration: underline;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0.85rem 2.55rem;
|
|
||||||
border: none;
|
|
||||||
border-radius: 100em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
%content-padding {
|
|
||||||
flex: 1;
|
|
||||||
padding: 4.4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
%frame {
|
|
||||||
@extend %shadow;
|
|
||||||
background-color: $color-white;
|
|
||||||
}
|
|
||||||
|
|
||||||
%group {
|
|
||||||
border: 1px solid $color-mikado-yellow;
|
|
||||||
border-radius: 3px;
|
|
||||||
color: $color-rolling-stone;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-right: 0.4rem;
|
|
||||||
padding: calc(1.6rem - 0.8em) 0.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
%member-info {
|
|
||||||
|
|
||||||
sib-multiple[name^='user.'],
|
|
||||||
> member-info > div,
|
|
||||||
> sib-display-value {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 1.7rem;
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
color: $color-selective-yellow;
|
|
||||||
padding: 0 0.6em 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[name$='city'] * {
|
|
||||||
@include mdi('atom');
|
|
||||||
}
|
|
||||||
|
|
||||||
[name$='email'] * {
|
|
||||||
@include mdi('email-outline');
|
|
||||||
}
|
|
||||||
|
|
||||||
[name$='phone'] * {
|
|
||||||
@include mdi('cellphone-iphone');
|
|
||||||
}
|
|
||||||
|
|
||||||
[name="foaf:homepage"]:not(:empty) {
|
|
||||||
@include mdi('link-variant');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%label {
|
|
||||||
color: $color-spun-pearl;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 2em 0 0.5em;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
%notification {
|
|
||||||
align-items: center;
|
|
||||||
background-color: $color-mustard;
|
|
||||||
border-radius: 100%;
|
|
||||||
color: $color-dark-lava;
|
|
||||||
display: flex !important;
|
|
||||||
font-size: 1.3rem;
|
|
||||||
height: 1.7em;
|
|
||||||
justify-content: center;
|
|
||||||
width: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
%shadow {
|
|
||||||
box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19);
|
|
||||||
}
|
|
||||||
|
|
||||||
%status-open {
|
|
||||||
background-color: $color-majorelle-blue;
|
|
||||||
border: none;
|
|
||||||
border-radius: 100em;
|
|
||||||
color: $color-white;
|
|
||||||
display: inline-block;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 0.85rem 1.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
%submit-form {
|
|
||||||
background-color: $color-purple-dark;
|
|
||||||
color: $color-white;
|
|
||||||
float: right;
|
|
||||||
font-weight: bold;
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
$breakpoints: (
|
|
||||||
phone: 480px,
|
|
||||||
tablet: 768px,
|
|
||||||
desktop: 1024px
|
|
||||||
) !default;
|
|
||||||
Loading…
Reference in New Issue
Block a user