css: refactoring & fixing - day 2
This commit is contained in:
Jean-Baptiste Pasquier
parent
68a187a06b
commit
2c649c447e
26
copy_lib.js
26
copy_lib.js
@ -1,26 +0,0 @@
|
||||
const { basename, join, resolve } = require('path');
|
||||
const fs = require('fs');
|
||||
const { exec } = require('child_process');
|
||||
|
||||
const distDir = 'www/lib';
|
||||
|
||||
const filelist = fs.readFileSync('lib_list.txt', 'utf-8').split(/\r?\n/);
|
||||
|
||||
exec(`mkdir -p ${distDir}`, () => {
|
||||
filelist.forEach(path => {
|
||||
path = resolve(path);
|
||||
const filename = basename(path);
|
||||
const dest = fs.lstatSync(path).isDirectory()
|
||||
? distDir
|
||||
: join(distDir, filename);
|
||||
const cmd = `rsync -ru ${path} ${dest}`;
|
||||
console.log(cmd);
|
||||
exec(cmd);
|
||||
});
|
||||
});
|
||||
|
||||
if (!fs.existsSync('src/config.json')) {
|
||||
const cmd = `rsync -ru src/config.sample.json src/config.json`;
|
||||
console.log(cmd);
|
||||
exec(cmd);
|
||||
}
|
||||
@ -4,7 +4,7 @@
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"serve": "node server.js",
|
||||
"postinstall": "node copy_lib.js"
|
||||
"postinstall": "node postinstall.js"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.4.4",
|
||||
|
||||
8
postinstall.js
Normal file
8
postinstall.js
Normal file
@ -0,0 +1,8 @@
|
||||
const fs = require('fs');
|
||||
const { exec } = require('child_process');
|
||||
|
||||
if (!fs.existsSync('src/config.json')) {
|
||||
const cmd = `rsync -ru src/config.sample.json src/config.json`;
|
||||
console.log(cmd);
|
||||
exec(cmd);
|
||||
}
|
||||
@ -2,7 +2,6 @@ script(type="module" src="https://unpkg.com/@startinblox/oidc@0.6.0")
|
||||
script(src="/scripts/index.js")
|
||||
|
||||
//- Stylesheets
|
||||
link(rel='stylesheet', href='/lib/normalize.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,300i,400,400i,600,600i,700,700i,800,800i')
|
||||
@ -10,7 +9,7 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
|
||||
//- local
|
||||
//- script(type="module" src="/lib/sib-core/src/index.js")
|
||||
//- script(type="module" src="/lib/sib-router/src/index.js")
|
||||
//- script(type="module" src="/lib/sib-chat/sib-chat.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")
|
||||
@ -18,8 +17,8 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
|
||||
//- CDN
|
||||
script(type="module" src="https://unpkg.com/@startinblox/core@0.7")
|
||||
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")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.1.12")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.2.1")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.11")
|
||||
script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.1.14")
|
||||
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
- var __env = locals[process.env.ENV]
|
||||
|
||||
-
|
||||
var __env = locals[process.env.ENV]
|
||||
for(k in __env){
|
||||
eval(`var ${k} = __env[${JSON.stringify(k)}]`);
|
||||
}
|
||||
@ -9,29 +9,29 @@ html(lang="en")
|
||||
link(rel="icon" type="image/png" href="/images/favicon.png")
|
||||
include dependencies.pug
|
||||
body
|
||||
header#header.row(role='banner')
|
||||
header#header(role='banner')
|
||||
include header.pug
|
||||
.content.row
|
||||
main
|
||||
include menu-left.pug
|
||||
main#mainContainer
|
||||
div#viewport
|
||||
|
||||
#members(hidden).padded-width
|
||||
include page-members.pug
|
||||
#members(hidden).no-sidebar
|
||||
include page-members-directory.pug
|
||||
|
||||
#job-offers(hidden).padded-width
|
||||
#job-offers(hidden).no-sidebar
|
||||
include page-job-offers.pug
|
||||
|
||||
#job-offer-create(hidden).padded-width
|
||||
#job-offer-create(hidden).no-sidebar
|
||||
sib-link(class="backlink", next="job-offers") Back
|
||||
include page-job-offer-create.pug
|
||||
|
||||
#project(hidden)
|
||||
#project(hidden).with-sidebar
|
||||
include page-project.pug
|
||||
|
||||
#circle(hidden)
|
||||
include page-group.pug
|
||||
#circle(hidden).with-sidebar
|
||||
include page-circle.pug
|
||||
|
||||
#member-chat(hidden)
|
||||
#member-chat(hidden).no-sidebar
|
||||
include page-member-chat.pug
|
||||
|
||||
#user-profile(hidden)
|
||||
|
||||
@ -1,20 +1,10 @@
|
||||
nav#navbar
|
||||
nav#main__menu
|
||||
sib-router#navbar-router(default-route='members')
|
||||
sib-route.menu(name='members')
|
||||
div.menu-notification
|
||||
sib-display(
|
||||
data-src=`${sdn}/members/`,
|
||||
data-fields='-'
|
||||
)
|
||||
div.menu-label Members
|
||||
div.menu-icon.icon-people
|
||||
div.divider
|
||||
sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
|
||||
div.menu-notification
|
||||
sib-display(
|
||||
data-src=`${sdn}/job-offers/`,
|
||||
data-fields='-'
|
||||
)
|
||||
div.menu-label Job offers
|
||||
div.menu-icon.icon-briefcase
|
||||
sib-route(hidden, name='job-offer-create')
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.chat-view
|
||||
.content-box.full-width.chat-view
|
||||
sib-chat(
|
||||
data-authentication='login',
|
||||
data-auto-login='true',
|
||||
26
src/page-circle-create.pug
Normal file
26
src/page-circle-create.pug
Normal file
@ -0,0 +1,26 @@
|
||||
.content-box.with-form.full-width
|
||||
h1 New group
|
||||
p Here you can create a new group according to your interests, what you want to share, etc.
|
||||
|
||||
sib-form(
|
||||
data-src=`${sdn}/circles/`,
|
||||
range-owner=`${sdn}/users/`,
|
||||
range-team=`${sdn}/members/`
|
||||
|
||||
data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
|
||||
|
||||
label-name="Channel's name",
|
||||
label-description='Description',
|
||||
label-owner='Owner of this channel',
|
||||
label-foaf:jabberID='Chatroom id',
|
||||
label-team='Member(s) of this channel',
|
||||
|
||||
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
|
||||
value-owner-text='The one who will admin this channel',
|
||||
value-team-text='Add any members as you want.',
|
||||
|
||||
|
||||
widget-description='sib-form-textarea',
|
||||
widget-jabberRoom='sib-form-checkbox',
|
||||
widget-team='sib-form-multiple-dropdown'
|
||||
)
|
||||
9
src/page-circle-edit.pug
Normal file
9
src/page-circle-edit.pug
Normal file
@ -0,0 +1,9 @@
|
||||
#circle-edit.content-box.with-form.full-width
|
||||
h1 Edit group
|
||||
sib-form.block(
|
||||
range-owner=`${sdn}/members/`,
|
||||
data-fields="name, description, owner, team, jabberID, jabberRoom"
|
||||
range-team=`${sdn}/members/`,
|
||||
widget-team='sib-form-multiple-dropdown',
|
||||
bind-resources
|
||||
)
|
||||
@ -1,4 +1,4 @@
|
||||
.frame
|
||||
.content-box.full-width
|
||||
h2 Channel's name:
|
||||
sib-display(
|
||||
data-fields='name',
|
||||
@ -8,8 +8,7 @@ nav.jsRightMenu(role='navigation')
|
||||
a Chat
|
||||
sib-route(name='circle-profile')
|
||||
li
|
||||
a Info
|
||||
sib-ac-checker(permission='change' bind-resources)
|
||||
a Information
|
||||
sib-route(name='circle-edit')
|
||||
li
|
||||
a Edit
|
||||
@ -18,10 +17,10 @@ nav.jsRightMenu(role='navigation')
|
||||
a Add new
|
||||
.views-container
|
||||
#circle-chat
|
||||
include page-group-chat.pug
|
||||
include page-circle-chat.pug
|
||||
#circle-profile
|
||||
include page-group-profile.pug
|
||||
include page-circle-profile.pug
|
||||
#circle-edit
|
||||
include page-group-edit.pug
|
||||
include page-circle-edit.pug
|
||||
#circle-create
|
||||
include page-group-create.pug
|
||||
include page-circle-create.pug
|
||||
@ -1,26 +0,0 @@
|
||||
.frame-form.full-wide
|
||||
h1 New group
|
||||
p.form-goal Here you can create a new group according to your interests, what you want to share, etc.
|
||||
.form-view
|
||||
sib-form(
|
||||
data-src=`${sdn}/circles/`,
|
||||
range-owner=`${sdn}/users/`,
|
||||
range-team=`${sdn}/members/`
|
||||
|
||||
data-fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
|
||||
|
||||
label-name="Channel's name",
|
||||
label-description='Description',
|
||||
label-owner='Owner of this channel',
|
||||
label-foaf:jabberID='Chatroom id',
|
||||
label-team='Member(s) of this channel',
|
||||
|
||||
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
|
||||
value-owner-text='The one who will admin this channel',
|
||||
value-team-text='Add any members as you want.',
|
||||
|
||||
|
||||
widget-description='sib-form-textarea',
|
||||
widget-jabberRoom='sib-form-checkbox',
|
||||
widget-team='sib-form-multiple-dropdown'
|
||||
)
|
||||
@ -1,10 +0,0 @@
|
||||
#circle-edit.frame-form
|
||||
h1 Edit group
|
||||
.form-view
|
||||
sib-form.block(
|
||||
range-owner=`${sdn}/members/`,
|
||||
data-fields="name, description, owner, team, jabberID, jabberRoom"
|
||||
range-team=`${sdn}/members/`,
|
||||
widget-team='sib-form-multiple-dropdown',
|
||||
bind-resources
|
||||
)
|
||||
@ -1,7 +0,0 @@
|
||||
#circles
|
||||
sib-display#circles-list(
|
||||
data-src=`${sdn}/circles/`,
|
||||
data-fields='name, description',
|
||||
search-fields='name, description',
|
||||
next='group'
|
||||
)
|
||||
@ -1,4 +1,6 @@
|
||||
.frame-form.frame
|
||||
.content-box.with-form
|
||||
h1 Post a new job offer
|
||||
p This form allows you to share an offer to all members of the network.
|
||||
|
||||
sib-widget(name='title-text')
|
||||
template
|
||||
@ -8,9 +10,6 @@
|
||||
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...'
|
||||
|
||||
h1 Post a new job offer
|
||||
p.form-goal This form allows you to share an offer to all members of the network.
|
||||
.form-view
|
||||
sib-form.block(
|
||||
data-src=`${sdn}/job-offers/`,
|
||||
range-skills= `${sdn}/skills/`,
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
div.grid-layer
|
||||
div.job-offers__main
|
||||
|
||||
include templates/template-groups.pug
|
||||
include templates/template-skills.pug
|
||||
include templates/template-joboffers-filter.pug
|
||||
|
||||
div.grid-layer-main.containerV
|
||||
div.job-offers__content
|
||||
h1 New offers
|
||||
span Here you can find and post offers
|
||||
sib-display#offers-list(
|
||||
@ -35,15 +35,9 @@ div.grid-layer
|
||||
search-widget-open='joboffers-filter'
|
||||
)
|
||||
|
||||
div.grid-layer-links.containerV
|
||||
div.job-offers__newoffer
|
||||
template#groups-list-template
|
||||
p ${value}
|
||||
sib-link(next="job-offer-create").plus-button
|
||||
div.icon-plus
|
||||
div Post a new offer
|
||||
//-sib-link().containerH.containerCenter.how-link
|
||||
div.icon-idea
|
||||
div.grow How To find a new offer?
|
||||
//-sib-link().containerH.containerCenter.how-link
|
||||
div.icon-idea
|
||||
div.grow How to set notification?
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
div
|
||||
.chat-view
|
||||
.content-box.full-width.chat-view
|
||||
sib-chat(
|
||||
data-authentication='login',
|
||||
data-auto-login='true',
|
||||
|
||||
@ -1,96 +0,0 @@
|
||||
.form-view
|
||||
sib-form.block(
|
||||
data-fields='user.first_name, user.last_name, user.account.picture, bio, groups, phone, skills, website',
|
||||
widget-user='hdapp-usereditinfo',
|
||||
range-groups=`${sdn}/groups/`, widget-skills='sib-form-multiple-dropdown',
|
||||
range-skills=`${sdn}/skills/`,
|
||||
bind-resources
|
||||
)
|
||||
|
||||
#crop-modal
|
||||
.crop-wrapper
|
||||
img#crop-preview(src='')
|
||||
.control-bar
|
||||
button#cancel-img-cropping.btn.btn-link Annuler
|
||||
i#rotate-img.fa.fa-undo(aria-hidden='true')
|
||||
button#crop-img.btn.btn-link Valider
|
||||
|
||||
|
||||
//-script.
|
||||
class LDPFormImgUpload extends SIBWidget {
|
||||
get template() {
|
||||
return `<label for="${this.name}"><img id="${this.name}-preview" src="${this.value}"/></label>
|
||||
<input id="${this.name}" type="file" name="${this.name}" value="${this.value}" />`;
|
||||
}
|
||||
|
||||
render() {
|
||||
store.get(this.value).then( (value) => {
|
||||
this._value = value;
|
||||
this.innerHTML = this.template;
|
||||
});
|
||||
}
|
||||
}
|
||||
customElements.define("ldp-form-img-upload", LDPFormImgUpload);
|
||||
widget-avatar="ldp-form-img-upload"
|
||||
|
||||
|
||||
//-script.
|
||||
// Constant declaration
|
||||
const avatarPreview = document.querySelector("#avatar-preview");
|
||||
const avatarInput = document.querySelector("#avatar-input");
|
||||
const cropModal = document.querySelector("#crop-modal");
|
||||
const cropPreview = cropModal.querySelector("#crop-preview");
|
||||
const $cropPreview = $(cropPreview);
|
||||
|
||||
// Triggers cropping on image upload
|
||||
avatarInput.addEventListener("change", function(e) {
|
||||
var img = avatarInput.files[0];
|
||||
var reader = new FileReader();
|
||||
|
||||
reader.onloadend = function () {
|
||||
cropPreview.src = reader.result;
|
||||
cropModal.classList.add("cropping-mode");
|
||||
}
|
||||
|
||||
if (img) {
|
||||
reader.readAsDataURL(img);//reads the data as a URL
|
||||
}
|
||||
});
|
||||
cropPreview.addEventListener("load", () => {
|
||||
$cropPreview.cropper({
|
||||
aspectRatio: 1/1,
|
||||
viewMode: 3,
|
||||
zoomable: false,
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
// Rotate image
|
||||
cropModal.querySelector("#rotate-img").addEventListener("click", () => {
|
||||
$cropPreview.cropper("rotate", -90);
|
||||
});
|
||||
|
||||
|
||||
// Cancel cropping
|
||||
cropModal.querySelector("#cancel-img-cropping").addEventListener("click", () => {
|
||||
closeCropping();
|
||||
});
|
||||
|
||||
// Shortcut
|
||||
document.querySelector("body").addEventListener("keydown", function(e) {
|
||||
// Escape key
|
||||
if (e.keyCode == 27 && cropModal.classList.contains("cropping-mode")) {
|
||||
closeCropping();
|
||||
}
|
||||
});
|
||||
function closeCropping() {
|
||||
cropModal.classList.remove("cropping-mode");
|
||||
avatarInput.value = null;
|
||||
}
|
||||
|
||||
|
||||
// Validating cropping
|
||||
cropModal.querySelector("#crop-img").addEventListener("click", () => {
|
||||
avatarPreview.src = $cropPreview.cropper("getCroppedCanvas").toDataURL()
|
||||
closeCropping();
|
||||
});
|
||||
@ -1,4 +1,4 @@
|
||||
.chat-view
|
||||
.content-box.full-width.chat-view
|
||||
sib-chat(
|
||||
data-authentication='login',
|
||||
data-auto-login='true',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.frame-form.full-wide
|
||||
.content-box.with-form.full-width
|
||||
h1 New project
|
||||
p.form-goal Here you can create your project, add members and assign them a job.
|
||||
.form-view
|
||||
p Here you can create your project, add members and assign them a job.
|
||||
|
||||
sib-form.block(
|
||||
data-src=`${sdn}/projects/`,
|
||||
range-members=`${sdn}/members/`,
|
||||
@ -16,12 +16,12 @@
|
||||
label-description='Project description',
|
||||
|
||||
set-block-project__fee='fieldset-fee, businessProvider, businessProviderFee',
|
||||
widget-fieldset-fee='template-legend-fee',
|
||||
widget-fieldset-fee='hd-template-project-title',
|
||||
label-businessProvider='Business provider',
|
||||
label-businessProviderFee='Amount of the contribution',
|
||||
|
||||
set-block-project__customer='fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone',
|
||||
widget-fieldset-customer='template-legend-customer',
|
||||
widget-fieldset-customer='hd-template-project-title',
|
||||
label-customer.companyRegister='Company register',
|
||||
label-customer.address='Address',
|
||||
label-customer.firstName='Name of the contact at the customer\'s premises',
|
||||
|
||||
@ -1,11 +1,15 @@
|
||||
|
||||
sib-widget(name='template-legend-team')
|
||||
|
||||
.content-box.with-form.full-width
|
||||
h1 Edit your project
|
||||
p Here you can edit your projet's details
|
||||
|
||||
sib-widget(name='hd-template-project-title')
|
||||
template
|
||||
span ${label}
|
||||
|
||||
sib-widget(name='template-members')
|
||||
sib-widget(name='template-members')
|
||||
template
|
||||
|
||||
sib-form.team.is-horizontal(
|
||||
naked,
|
||||
data-src='${id}',
|
||||
@ -17,10 +21,6 @@ sib-widget(name='template-members')
|
||||
label-user.name='Member(s)',
|
||||
)
|
||||
|
||||
.frame-form.full-wide
|
||||
h1 Edit your project
|
||||
p.form-goal Here you can edit your projet's details
|
||||
.form-view
|
||||
sib-form.block(
|
||||
data-fields='block-project__info, block-project__fee, block-project__customer, block-project__team',
|
||||
|
||||
@ -34,7 +34,7 @@ sib-widget(name='template-members')
|
||||
range-businessProvider=`${sdn}/businessproviders/`,
|
||||
label-businessProvider='Business provider',
|
||||
label-businessProvider.fee='Amount of the contribution (%)',
|
||||
widget-fieldset-fee='template-legend-team',
|
||||
widget-fieldset-fee='hd-template-project-title',
|
||||
widget-businessProvider.fee='sib-form-number',
|
||||
label-fieldset-fee='Fee',
|
||||
|
||||
@ -46,12 +46,12 @@ sib-widget(name='template-members')
|
||||
label-customer.role='Role within the company',
|
||||
label-customer.email='Email',
|
||||
label-customer.phone='Phone',
|
||||
widget-fieldset-customer='template-legend-team',
|
||||
widget-fieldset-customer='hd-template-project-title',
|
||||
label-fieldset-customer='Customer information',
|
||||
|
||||
set-block-project__team='fieldset-team, members',
|
||||
label-fieldset-team='The team',
|
||||
widget-fieldset-team='template-legend-team',
|
||||
widget-fieldset-team='hd-template-project-title',
|
||||
widget-members='template-members',
|
||||
multiple-members,
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.frame-form.full-wide
|
||||
.content-box.full-width
|
||||
|
||||
include templates/template-business-provider.pug
|
||||
include templates/template-customer.pug
|
||||
|
||||
@ -1,10 +0,0 @@
|
||||
//#projects
|
||||
div
|
||||
h1 Projects
|
||||
sib-display(
|
||||
data-src=`${sdn}/projects/`,
|
||||
data-fields='phone, customer, name',
|
||||
widget-customer='hdapp-client',
|
||||
search-fields='phone, name',
|
||||
next='project'
|
||||
)
|
||||
@ -1,17 +1,21 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
@import '../../node_modules/include-media/dist/include-media';
|
||||
@import '../../node_modules/normalize.css/normalize';
|
||||
|
||||
@import 'abstracts/variables';
|
||||
@import 'abstracts/mixins';
|
||||
@import 'components/icons/index';
|
||||
@import 'base/main';
|
||||
@import 'components/index';
|
||||
|
||||
main#mainContainer {
|
||||
div#viewport {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
@import 'components/index';
|
||||
@import 'layout/members/index';
|
||||
@import 'layout/job-offers/index';
|
||||
@import 'layout/project-profile/index';
|
||||
@import 'layout/circle-profile/index';
|
||||
@import 'layout/member-chat/index';
|
||||
}
|
||||
|
||||
@ -1,24 +1,4 @@
|
||||
@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;
|
||||
}
|
||||
@ -1,4 +1,4 @@
|
||||
.grid-layer {
|
||||
%grid-layer {
|
||||
display: grid;
|
||||
font-size: 16px;
|
||||
grid-template-columns: [start]auto[middle]25%[end];
|
||||
@ -11,7 +11,7 @@
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid-layer-main {
|
||||
%grid-layer-main {
|
||||
@extend %flex-grid-layer;
|
||||
grid-column-start: start;
|
||||
grid-column-end: end;
|
||||
@ -19,7 +19,7 @@
|
||||
grid-row-end: end;
|
||||
}
|
||||
|
||||
.grid-layer-links {
|
||||
%grid-layer-links {
|
||||
@extend %flex-grid-layer;
|
||||
grid-column-start: middle;
|
||||
grid-column-end: end;
|
||||
@ -27,47 +27,8 @@
|
||||
grid-row-end: middle;
|
||||
}
|
||||
|
||||
.containerH {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.containerV {
|
||||
%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;
|
||||
}
|
||||
294
src/styles/base/form.scss
Normal file
294
src/styles/base/form.scss
Normal file
@ -0,0 +1,294 @@
|
||||
.content-box {
|
||||
|
||||
&.with-form {
|
||||
|
||||
hd-template-project-title {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
sib-form {
|
||||
border-bottom: 1px solid $color-210-17-91;
|
||||
padding-bottom: 2.55rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-bottom: 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[name$='-text'] {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
div[name^='block-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-dropdown,
|
||||
sib-form-label-text,
|
||||
sib-form-multiple-dropdown,
|
||||
sib-form-number,
|
||||
sib-form-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
>label {
|
||||
color: $color-244-10-70;
|
||||
font-weight: 600;
|
||||
margin: 2em 0 0.5em;
|
||||
text-transform: uppercase;
|
||||
|
||||
>div {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
padding: 1.7rem;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
label {
|
||||
color: $color-216-4-22;
|
||||
font-weight: 600;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion {
|
||||
|
||||
div.choices__inner {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding-left: 0;
|
||||
|
||||
div.choices__list {
|
||||
margin-top: 1.7rem;
|
||||
|
||||
div.choices__item {
|
||||
|
||||
button.choices__button {
|
||||
border-left: 1px solid $color-43-100-50;
|
||||
opacity: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'].choices__input {
|
||||
max-width: 27.2rem;
|
||||
min-width: 27.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-checkbox {
|
||||
flex-direction: row;
|
||||
|
||||
[type='checkbox'] {
|
||||
position: relative;
|
||||
margin-top: 2em;
|
||||
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
color: $color-244-73-62;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
@include mdi('check');
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $color-0-0-100;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-dropdown {
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/images/chevron-down.png");
|
||||
background-position: right 12px top 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 9px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
|
||||
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
sib-multiple-form {
|
||||
|
||||
>label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
margin-top: 6rem;
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
sib-multiple-form[name='members'] {
|
||||
|
||||
>div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
>div:not(:nth-child(-n + 2)) {
|
||||
|
||||
label {
|
||||
|
||||
>div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
|
||||
&::after {
|
||||
content: Add;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
|
||||
#header {
|
||||
max-height: 51px;
|
||||
height: 51px;
|
||||
align-items: center;
|
||||
background-color: $color-0-0-100;
|
||||
color: $color-216-4-22;
|
||||
@ -23,6 +23,14 @@ $breakpoints: (phone: 480px,
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
@ -76,39 +84,60 @@ button {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
sib-route,
|
||||
sib-link,
|
||||
button,
|
||||
input,
|
||||
a {
|
||||
cursor: pointer;
|
||||
&:hover,
|
||||
&:link,
|
||||
&:active {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
%padding-main {
|
||||
padding: 5rem;
|
||||
}
|
||||
|
||||
.padded-width {
|
||||
flex: 1;
|
||||
@extend %padding-main;
|
||||
}
|
||||
|
||||
.frame {
|
||||
.content-box {
|
||||
@include window-style-modal();
|
||||
@extend %padding-main;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
margin: 2rem 1rem 5rem 2rem;
|
||||
|
||||
&.full-width {
|
||||
background: $color-0-0-100;
|
||||
flex: 1;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 auto;
|
||||
min-height: calc(100vh - 84px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dividing into columns */
|
||||
@mixin respond-to($breakpoint) {
|
||||
.backlink {
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
@include icon('arrow-left-circle');
|
||||
color: #3d4057;
|
||||
text-decoration: underline;
|
||||
|
||||
@if map-has-key($breakpoints, $breakpoint) {
|
||||
|
||||
@media (min-width: map-get($breakpoints, $breakpoint)) {
|
||||
@content;
|
||||
}
|
||||
&::before {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@else {
|
||||
@warn "Sorry, no value could be retrieved from `#{$breakpoint}`."
|
||||
+"Available breakpoints are: #{map-keys($breakpoints)}.";
|
||||
&::before {
|
||||
font-size: 2rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Compatibility layer for non-updated components
|
||||
@import 'compat';
|
||||
// Other base components
|
||||
@import 'form';
|
||||
@import 'header';
|
||||
@import 'menu-left';
|
||||
@ -1,4 +1,4 @@
|
||||
#navbar {
|
||||
#main__menu {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
display: block;
|
||||
@ -1,8 +1,6 @@
|
||||
@import 'form';
|
||||
@import 'content';
|
||||
@import 'chat';
|
||||
@import 'filters';
|
||||
@import 'howto';
|
||||
@import 'header';
|
||||
@import 'menu-left';
|
||||
@import 'menu-right';
|
||||
@import 'sidebar';
|
||||
@import 'skills';
|
||||
@import 'user-role';
|
||||
15
src/styles/components/chat.scss
Normal file
15
src/styles/components/chat.scss
Normal file
@ -0,0 +1,15 @@
|
||||
|
||||
// chat
|
||||
|
||||
.chat-view {
|
||||
padding: 1.7rem;
|
||||
height: calc(100vh - 84px);
|
||||
|
||||
> sib-chat {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,114 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
@ -1,297 +0,0 @@
|
||||
@include style-template-fieldset('fee');
|
||||
@include style-template-fieldset('customer');
|
||||
@include style-template-fieldset('team');
|
||||
|
||||
.frame-form {
|
||||
&.full-wide {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
font-size: 1.5rem;
|
||||
flex-direction: column;
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
padding: 6.8rem 8.5rem 10.2rem;
|
||||
background: $color-0-0-100;
|
||||
}
|
||||
|
||||
.form-view {
|
||||
border-bottom: 1px solid $color-210-17-91;
|
||||
padding-bottom: 2.55rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
p.form-goal {
|
||||
margin-bottom: 6.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
[name$='-text'] {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
div[name^='block-'] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
input {
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-dropdown,
|
||||
sib-form-label-text,
|
||||
sib-form-multiple-dropdown,
|
||||
sib-form-number,
|
||||
sib-form-textarea {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
> label {
|
||||
color: $color-244-10-70;
|
||||
font-weight: 600;
|
||||
margin: 2em 0 0.5em;
|
||||
text-transform: uppercase;
|
||||
|
||||
> div {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
background: $color-222-57-95;
|
||||
border: none;
|
||||
color: $color-233-18-29;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
select,
|
||||
textarea {
|
||||
padding: 1.7rem;
|
||||
}
|
||||
|
||||
select {
|
||||
margin-bottom: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion,
|
||||
sib-form-checkbox,
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
label {
|
||||
color: $color-216-4-22;
|
||||
font-weight: 600;
|
||||
text-transform: initial;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-auto-completion {
|
||||
|
||||
div.choices__inner {
|
||||
background-color: inherit;
|
||||
border: none;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
padding-left: 0;
|
||||
|
||||
div.choices__list {
|
||||
margin-top: 1.7rem;
|
||||
|
||||
div.choices__item {
|
||||
/*@extend %skill;*/
|
||||
|
||||
button.choices__button {
|
||||
border-left: 1px solid $color-43-100-50;
|
||||
opacity: 1;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type='text'].choices__input {
|
||||
max-width: 27.2rem;
|
||||
min-width: 27.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-checkbox {
|
||||
flex-direction: row;
|
||||
|
||||
[type='checkbox'] {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
margin-top: 2em;
|
||||
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border: 2px solid $color-210-5-56;
|
||||
color: $color-244-73-62;
|
||||
height: 1rem;
|
||||
left: 0;
|
||||
margin-left: 1rem;
|
||||
padding-bottom: 0.2rem;
|
||||
position: absolute;
|
||||
width: 1.2rem;
|
||||
z-index: 1;
|
||||
@include mdi('check');
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
background: $color-0-0-100;
|
||||
content: '';
|
||||
height: 1rem;
|
||||
position: absolute;
|
||||
width: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-dropdown {
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
background-image: url("/images/chevron-down.png");
|
||||
background-position: right 12px top 60%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 14px 9px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
|
||||
|
||||
sib-form-multiple-dropdown {
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
cursor: pointer;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
sib-form-textarea {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
sib-multiple-form {
|
||||
|
||||
> label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
margin-top: 6rem;
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
float: right;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
#project-create,
|
||||
#project-edit {
|
||||
|
||||
input,
|
||||
textarea {
|
||||
margin-bottom: 3.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.is-horizontal {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-right: 0.75rem;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.is-expanded {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
sib-multiple-form[name='members'] {
|
||||
|
||||
> div {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> div:not(:nth-child(-n + 2)) {
|
||||
|
||||
label {
|
||||
|
||||
> div {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
background-color: $color-0-0-100;
|
||||
border: 1px solid;
|
||||
border-radius: 100%;
|
||||
color: $color-244-73-62;
|
||||
cursor: pointer;
|
||||
font-size: 2.55rem;
|
||||
height: 1em;
|
||||
line-height: 0;
|
||||
margin: 0.34rem;
|
||||
padding: 0 0.04em 0.08em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
|
||||
&::after {
|
||||
content: Add;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,113 +0,0 @@
|
||||
#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 {
|
||||
|
||||
nav {
|
||||
transition: all 0.5s;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
>ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.55rem 2.55rem;
|
||||
position: relative;
|
||||
width: 12em;
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
margin-left: 0;
|
||||
margin-right: 2.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
>li {
|
||||
@include icon('arrow-right-circle');
|
||||
}
|
||||
|
||||
>sib-route {
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&[name^='circle'],
|
||||
&[name^='project'] {
|
||||
|
||||
>li::before {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[name$='chat']>li {
|
||||
@include ci('chat');
|
||||
}
|
||||
|
||||
&[name$='create']>li {
|
||||
@include ci('offer');
|
||||
}
|
||||
|
||||
&[name$='edit']>li {
|
||||
@include ci('list');
|
||||
}
|
||||
|
||||
&[name$='profile']>li {
|
||||
@include ci('information');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.offsite-is-closed {
|
||||
transform: translate(15.5rem);
|
||||
|
||||
& .jsOffsiteToggle::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&~.views-container {
|
||||
margin-left: -15.5rem;
|
||||
transform: translate(15.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/styles/components/sidebar.scss
Normal file
106
src/styles/components/sidebar.scss
Normal file
@ -0,0 +1,106 @@
|
||||
.no-sidebar {
|
||||
flex: 1;
|
||||
@extend %padding-main;
|
||||
}
|
||||
|
||||
.with-sidebar {
|
||||
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;
|
||||
}
|
||||
|
||||
nav {
|
||||
transition: all 0.5s;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
>ul {
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.55rem 2.55rem;
|
||||
position: relative;
|
||||
width: 12em;
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
font-size: 4rem;
|
||||
margin-left: 0;
|
||||
margin-right: 2.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
>li {
|
||||
@include icon('arrow-right-circle');
|
||||
}
|
||||
|
||||
>sib-route {
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&[name^='circle'],
|
||||
&[name^='project'] {
|
||||
|
||||
>li::before {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&[name$='chat']>li {
|
||||
@include ci('chat');
|
||||
}
|
||||
|
||||
&[name$='create']>li {
|
||||
@include ci('offer');
|
||||
}
|
||||
|
||||
&[name$='edit']>li {
|
||||
@include ci('list');
|
||||
}
|
||||
|
||||
&[name$='profile']>li {
|
||||
@include ci('information');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.offsite-is-closed {
|
||||
transform: translate(15.5rem);
|
||||
|
||||
& .jsOffsiteToggle::before {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
&~.views-container {
|
||||
margin-left: -15.5rem;
|
||||
transform: translate(15.5rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
/* TEMPLATE SKILLS*/
|
||||
|
||||
sib-multiple[name*='skills'] {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
9
src/styles/components/user-role.scss
Normal file
9
src/styles/components/user-role.scss
Normal file
@ -0,0 +1,9 @@
|
||||
%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;
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
#circle-profile {
|
||||
min-height: 100%;
|
||||
|
||||
.block-group > div {
|
||||
display: flex;
|
||||
|
||||
@ -1,3 +1,17 @@
|
||||
.job-offers__main {
|
||||
@extend %grid-layer;
|
||||
}
|
||||
|
||||
.job-offers__content {
|
||||
@extend %grid-layer-main;
|
||||
@extend %containerV;
|
||||
}
|
||||
|
||||
.job-offers__newoffer {
|
||||
@extend %grid-layer-links;
|
||||
@extend %containerV;
|
||||
}
|
||||
|
||||
#job-offers {
|
||||
|
||||
.plus-button {
|
||||
@ -21,7 +35,7 @@
|
||||
}
|
||||
|
||||
#offers-list {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
>sib-form {
|
||||
grid-column-start: start;
|
||||
@ -46,9 +60,6 @@
|
||||
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;
|
||||
|
||||
@ -1 +0,0 @@
|
||||
@import 'member-chat.scss';
|
||||
@ -1,3 +0,0 @@
|
||||
#member-chat {
|
||||
width: 100%;
|
||||
}
|
||||
@ -35,26 +35,11 @@ member-info-groups {
|
||||
@extend %user-role;
|
||||
}
|
||||
|
||||
.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 {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
#members-list__content {
|
||||
@extend .grid-layer;
|
||||
@extend %grid-layer;
|
||||
|
||||
nav {
|
||||
align-items: center;
|
||||
@ -194,7 +179,6 @@ member-info-groups {
|
||||
|
||||
[name='user.name'] {
|
||||
font-weight: bold;
|
||||
margin: 0;
|
||||
@extend h1;
|
||||
}
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
display: flex;
|
||||
padding-bottom: 3.4rem;
|
||||
|
||||
> * {
|
||||
>* {
|
||||
color: $color-216-4-22;
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
@ -31,11 +31,11 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
> [name^='const-'] {
|
||||
>[name^='const-'] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> sib-display-value[name='name'] {
|
||||
>sib-display-value[name='name'] {
|
||||
padding-left: 0.85rem;
|
||||
}
|
||||
|
||||
@ -95,16 +95,15 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#clientBox {
|
||||
#clientBox {
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 1.7rem;
|
||||
max-width: 100%;
|
||||
|
||||
> * {
|
||||
>* {
|
||||
border: 1px solid $color-221-51-90;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-between;
|
||||
@ -165,23 +164,23 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[name='block-team'] {
|
||||
[name='block-team'] {
|
||||
|
||||
> sib-multiple {
|
||||
>sib-multiple {
|
||||
|
||||
label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> team-template[name='members'] {
|
||||
>team-template[name='members'] {
|
||||
display: grid;
|
||||
grid-column-gap: 1.6rem;
|
||||
grid-template-columns: 7vh auto;
|
||||
grid-template-rows: repeat(2, 5.2vh);
|
||||
|
||||
> sib-display:first-child {
|
||||
>sib-display:first-child {
|
||||
align-self: center;
|
||||
grid-column: 1 / span 1;
|
||||
grid-row: 1 / span 2;
|
||||
@ -205,7 +204,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
> div:nth-child(2) {
|
||||
>div:nth-child(2) {
|
||||
align-self: end;
|
||||
display: flex;
|
||||
grid-column: 2 / span 1;
|
||||
@ -216,9 +215,9 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span ~ sib-display {
|
||||
span~sib-display {
|
||||
|
||||
> div {
|
||||
>div {
|
||||
display: flex;
|
||||
margin-left: 1rem;
|
||||
|
||||
@ -229,11 +228,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
> span:nth-child(3) {
|
||||
>span:nth-child(3) {
|
||||
align-self: start;
|
||||
grid-column: 2 / span 1;
|
||||
grid-row: 2 / span 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user