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

Merge branch 'release/profile-directory' into feature/profile-rebased

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier 2020-05-19 15:38:18 +02:00
commit a823e8b909
No known key found for this signature in database
GPG Key ID: F2702E6D22ED4D62
47 changed files with 2316 additions and 336 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored
View File

@ -1,6 +1,11 @@
**/node_modules **/node_modules
**/config.json config.json
.DS_Store
*.iml *.iml
*.swp *.swp
dist dist
cypress/screenshots
cypress/videos
cache
.npm
.DS_Store .DS_Store

47
.gitlab-ci.yml
View File

@ -1,13 +1,56 @@
image: node:11 # workflow
stages: stages:
- build
- test
- integration - integration
- acceptance - acceptance
- release - release
- deployment - deployment
# default image for jobs
default:
image: node:11
# cache modules between jobs
cache:
key: ${CI_COMMIT_REF_SLUG}
paths:
- .npm/
## BUILD ##
build:
stage: build
before_script:
- npm ci --cache .npm --prefer-offline --only=production
script:
- cp config.sample.json config.json
- npm run build
artifacts:
when: on_success
expire_in: 1 day
paths:
- dist/
tags:
- test
## TESTING ## ## TESTING ##
test:e2e:
stage: test
image: cypress/included:4.5.0
services:
- name: ${CI_REGISTRY_IMAGE}/server:0.1
before_script:
# install missing dependencies
- npm install -g sirv-cli
# making sure the process is orphan
- sirv dist --port 3000 > /dev/null 2>&1 &
script:
- cypress run -e CYPRESS_baseUrl=http://localhost:3000
tags:
- test
## VALIDATION ## ## VALIDATION ##
test1: test1:

28
README.md
View File

@ -221,6 +221,34 @@ On `config.json`:
} }
``` ```
## Use with docker
### Multi services
Run with a local binding on localhost:
```bash
docker-compose build
docker-compose up -d client server
```
Use in CI context:
```bash
docker-compose -f docker-compose.yml build
docker-compose -f docker-compose.yml up -d client server
docker-compose -f docker-compose.yml run --rm e2e
```
Build and push the server to registry:
```bash
docker build -f docker/djangoldp.docker --build-arg serve="http://localhost:8000" -t registry.startinblox.com/applications/hubl/server:0.1 .
docker push registry.startinblox.com/applications/hubl/server:0.1
```
Note: within a Kubernetes pod all services are bound to `localhost`.
## Built With ## Built With
* [Sib-Core](https://git.startinblox.com/framework/sib-core/) - An awesome new framework! * [Sib-Core](https://git.startinblox.com/framework/sib-core/) - An awesome new framework!

10
client.sample.css Normal file
View File

@ -0,0 +1,10 @@
:root {
--color-primary: #FF6765;
--color-secondary: #46271B;
--color-complementary: #5BB4CE;
--color-complementary-darken: #35A0C0;
--color-black-s: 45%;
--color-black-h: 16;
--color-black-l: 6%;
}

176
client.sample.happy-dev.css Normal file
View File

@ -0,0 +1,176 @@
:root {
--color-primary: #FFB700;
--color-secondary: #3C3F57;
--color-complementary: #6259E5;
--color-complementary-darken: #36383B;
--color-white: #FFFFFF;
--color-black-h: 216;
--color-black-s: 4%;
--color-black-l: 22%;
--color-main-background: var(--color-grey-13);
--color-main-text: #7A7F85;
--color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black);
--color-bell: var(--color-secondary);
--color-avatar-background: #E4E8ED;
--color-title: #36383B;
--color-h1: var(--color-title);
--color-h2: var(--color-title);
/* Header's elements */
--color-header-background: var(--color-white);
--color-bell: var(--color-complementary-darken);
--color-user-panel-header-text: var(--color-complementary-darken);
--color-user-panel-header-background: var(--color-white);
--color-user-panel-header-text-open: var(--color-white);
--color-user-panel-header-background-open: var(--color-secondary);
--color-user-panel-list-background: var(--color-white);
--color-user-panel-list-text-hover: var(--color-complementary);
--color-user-panel-list-border: #E4E8ED;
/* Left menu */
--color-menu-highlight-primary: #FFD759;
--color-menu-background: var(--color-secondary);
--color-menu-text: var(--color-white);
--color-menu-text-active: var(--color-secondary);
--color-menu-background-active: var(--color-menu-highlight-primary);
--color-menu-badge-background: var(--color-menu-highlight-primary);
--color-menu-badge-text-active: var(--color-menu-highlight-primary);
--color-menu-badge-background-active: var(--color-secondary);
--color-menu-icon-background-active: var(--color-secondary);
/* Right menu */
--color-right-menu-background: #DAE2F3;
--color-right-menu-text: var(--color-secondary);
--color-right-menu-link-border: #BDC2D7;
--color-right-menu-active-text: var(--color-primary);
--color-right-menu-active-background: var(--color-secondary);
--color-right-menu-active-icon: var(--color-primary);
/* Scrollbar */
--color-scrollbar-right-background: var(--color-white);
--color-scrollbar-right-track: var(--color-grey-6);
--color-scrollbar-left-background: var(--color-secondary);
--color-scrollbar-left-track: var(--color-grey-11);
/* Tags */
--color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary);
--color-tag-group-text: #9BA0A7;
--color-tag-group-border: var(--color-primary);
/* Form elements */
--color-button-white: var(--color-white);
--color-button-primary: var(--color-primary);
--color-button-secondary: var(--color-complementary);
--color-button-complementary: var(--color-secondary);
--color-input-background: #EDF1FA;
--color-input-text: var(--color-secondary);
--color-input-icon: var(--color-complementary);
--color-input-active: var(--color-complementary);
--color-fieldset: var(--color-title);
--color-fieldset-border: #DAE2F3;
--color-button-modal: var(--color-title);
--color-select-list: var(--color-secondary);
--color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-complementary);
--color-label-light: var(--color-grey-6);
/* Skill */
--color-skill-background: var(--color-primary);
--color-skill-text: var(--color-white);
/* Icon */
--color-icon: var(--color-primary);
/* Table */
--color-table-header-background: #BDC2D7;
--color-table-header-text: var(--color-white);
--color-table-border: #BDC2D7;
/* User thumb */
--color-user-thumb-name: #7A7F85;
--color-backlink: var(--color-secondary);
--color-content-header: #DAE2F3;
/* Chat */
--color-chat-white: var(--color-white);
--color-chat-primary: var(--color-primary);
--color-chat-complementary: var(--color-complementary);
--color-chat-secondary: var(--color-secondary);
--color-chat-complementary-darken: var(--color-complementary-darken);
--color-chat-grey-1: var(--color-grey-4);
--color-chat-grey-2: var(--color-grey-6);
--color-chat-grey-3: var(--color-grey-10);
}
/* Button to edit a channel or a project (in project-profile) */
#project sib-link[next="project-edit"],
#circle sib-link[next="circle-edit"] {
background: var(--color-complementary);
border: 1px solid var(--color-complementary);
}
#project sib-link[next="project-edit"]:hover,
#circle sib-link[next="circle-edit"]:hover {
background: var(--color-white);
border: 1px solid var(--color-complementary);
color: var(--color-complementary);
}
/* Button to delete a channel */
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete {
background: var(--color-white);
border: 1px solid var(--color-complementary);
color: var(--color-complementary);
}
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete>button {
color: var(--color-complementary);
}
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover {
background: var(--color-complementary);
border: 1px solid var(--color-complementary);
color: var(--color-white);
}
#circle-profile>div>div.box-button>sib-ac-checker>sib-delete:hover>button {
color: var(--color-white);
}
/* Button with a pen to edit a user */
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link {
background: var(--color-complementary);
border: 1px solid var(--color-complementary);
color: var(--color-white);
}
#admin-users-list>div>div.table>sib-display>div>sib-display>div>sib-action-hd-custom>sib-ac-checker>sib-link:hover {
background: var(--color-white);
border: 1px solid var(--color-complementary);
color: var(--color-complementary);
}
/* Button to join a channel */
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form {
background: var(--color-complementary);
border: 1px solid var(--color-complementary);
color: var(--color-white);
}
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover {
background: var(--color-white);
border: 1px solid var(--color-complementary);
color: var(--color-complementary);
}
#admin-circle-list>div>div.table>sib-display:nth-child(5)>div>sib-display>div>admin-circle-join-button>sib-form:hover input {
color: var(--color-complementary);
}

4
config.sample.json
View File

@ -3,8 +3,8 @@
"authority": "http://localhost:8000/", "authority": "http://localhost:8000/",
"authorityName": "djangoldp-server-name", "authorityName": "djangoldp-server-name",
"endpoints": { "endpoints": {
"groups": "http://localhost:8000/groups/",
"skills": "http://localhost:8000/skills/", "skills": "http://localhost:8000/skills/",
"users": "http://localhost:8000/users/", "users": "http://localhost:8000/users/"
"groups": "http://localhost:8000/groups/"
} }
} }

7
cypress.json Normal file
View File

@ -0,0 +1,7 @@
{
"baseUrl": "http://127.0.0.1:3000",
"defaultCommandTimeout": 60000,
"chromeWebSecurity": false,
"viewportWidth": 1920,
"viewportHeight": 1080
}

5
cypress/fixtures/example.json Normal file
View File

@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}

108
cypress/integration/tests.spec.js Normal file
View File

@ -0,0 +1,108 @@
/// <reference types="Cypress" />
context('Browser testing', () => {
before(() => {
cy.clearLocalStorage({ domain: null});
cy.clearCookies({ domain: null });
});
it('visit the homepage', () => {
cy.visit('/');
});
it('should await for an user login', () => {
cy.location().should((loc) => {
expect(loc.pathname).to.eq('/auth/login/');
});
});
describe('Login process', () => {
it('should write "admin" on username field and "password" on password field', () => {
cy.get('#id_username').type('admin');
cy.get('#id_username').should('have.value', 'admin');
cy.get('#id_password').type('password');
cy.get('#id_password').should('have.value', 'password');
});
it('should click on login button', () => {
cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
});
it('should provide an error, username and password mismatch.', () => {
cy.get('.error').should('contain.text', 'Ton nom d\'utilisateur et ton mot de passe ne correspondent pas. Réessaye.')
});
it('should write "admin" on password field then press the login button', () => {
cy.get('#id_password').type('admin');
cy.get('#id_password').should('have.value', 'admin');
cy.get(':nth-child(1) > .flex-column > [type="submit"]').click();
});
it('should ask for user permission to access their datas.', () => {
cy.location().should((loc) => {
expect(loc.pathname).to.eq('/authorize')
});
cy.get('.accept-button').click();
});
// it('should redirect the user to the app.', () => {
// cy.get('.accept-button').click();
// cy.location().should((loc) => {
// expect(loc.protocol + "//" + loc.host).to.eq(Cypress.config().baseUrl);
// expect(loc.pathname).to.eq('/');
// });
// });
// });
// describe('Main interface', () => {
// // it('should show my name on top right', () => {
// // cy.get('sib-display-value').contains('Admin');
// // });
// it('should show my username on the left menu', () => {
// cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').contains('admin');
// });
// it('should open a chat with myself', () => {
// cy.get('[fields="username, badge"][data-src="http://localhost:8000/users/admin/"] > :nth-child(1) > sib-display-div > div').click();
// cy.get('.name').contains('admin');
// });
// it('should not work, because I have no Prosody configured', () => {
// cy.get('.content-box > .chat-view > sib-chat').should('be.empty');
// });
// describe('Circles', () => {
// it('should navigate the Administration from left menu', () => {
// cy.get('.create > sib-link').click();
// cy.get('#admin-circles > .content-box > .content-box__header > .without-margin').contains('Administration');
// cy.get('#admin-circle-list > .content-box__info > .admin-header > .admin-header__title').contains('Circles');
// });
// it('should navigate to Circle creation', () => {
// cy.get('#admin-circle-list > .content-box__info > .admin-header > .button').click();
// cy.location().should((loc) => {
// expect(loc.pathname).to.contain('admin-circle-create');
// });
// });
// var name = new Uint32Array(1);
// crypto.getRandomValues(name);
// name = "Test Circle " + name;
// it('should allow Circle Creation', () => {
// cy.get('form > sib-form-label-text[name="name"] > label > input').type(name);
// cy.get('.content-box__info > sib-form > form > sib-form-label-text[name="description"] > label > input').type('With a great description!');
// cy.get('#admin-circle-create > .content-box__info > sib-form > form > [type="submit"]').click();
// cy.get('#admin-circle-list > div > div.table > sib-display').contains(name);
// });
// it('should open the circle information page', () => {
// cy.screenshot();
// cy.get('#navbar-router').contains(name).click();
// cy.get('[name="circle-information"] > li').click();
// });
// it('should delete the circle', () => {
// cy.get('.box-button > sib-ac-checker > .button').click();
// cy.get('#navbar-router').should('not.contain', name);
// });
// });
// });
// describe('Logout process', () => {
// it('should properly log out the user', () => {
// cy.get('#user-controls__profile > div').click();
// cy.get('#user-controls__panel > nav > button').click();
// // Dirty fix for logout, targeting logout button is not enough.
// cy.clearLocalStorage({ domain: null });
// cy.clearCookies({ domain: null });
// cy.location().should((loc) => {
// expect(loc.pathname).to.eq('/auth/login/');
// });
// });
});
});

20
cypress/plugins/index.js Normal file
View File

@ -0,0 +1,20 @@
/// <reference types="cypress" />
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
// require('cypress-terminal-report').installPlugin(on);
};

25
cypress/support/commands.js Normal file
View File

@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

30
cypress/support/index.js Normal file
View File

@ -0,0 +1,30 @@
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
//require('cypress-terminal-report').installSupport();
// Alternatively you can use CommonJS syntax:
// require('./commands')
Cypress.on('uncaught:exception', (err, runnable) => {
// returning false here prevents Cypress from
// failing the test
console.log('Cypress detected uncaught exception', err);
return false;
});
Cypress.on('fail', () => Cypress.runner.abort())

18
docker/config.json Normal file
View File

@ -0,0 +1,18 @@
{
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "$SERVER",
"authorityName": "djangoldp-server-name",
"endpoints": {
"get": {
"circles": "$SERVER/circles/",
"groups": "$SERVER/groups/",
"users": "$SERVER/users/"
},
"post": {
"circles": "$SERVER/circles/",
"groups": "$SERVER/groups/",
"users": "$SERVER/users/"
}
},
"analytics": []
}

26
docker/djangoldp.docker Normal file
View File

@ -0,0 +1,26 @@
FROM python:3.6
LABEL maintainer="Plup <plup@plup.io>"
# get server address
ARG serve
# fix bug in manager install
ENV PATH="/root/.local/bin:${PATH}"
# install a LDP server with required functions
WORKDIR /app
RUN pip install git+https://git.startinblox.com/djangoldp-packages/server-manager.git
RUN sib startproject sibserver
COPY docker/packages.yml /app/sibserver/
RUN sed -i 's#SERVER#'"${serve:-http://localhost:8000}"'#' /app/sibserver/packages.yml
RUN cd /app/sibserver && sib install server
# fix invalid HTTP_HOST
RUN sed -i 's/ALLOWED_HOSTS\s=\s\[\]/ALLOWED_HOSTS=\["\*"\]/' /app/sibserver/server/settings.py
# run the dev server
EXPOSE 8000
ENTRYPOINT ["python", "/app/sibserver/manage.py"]
CMD ["runserver", "0.0.0.0:8000"]
# vim: ft=dockerfile:

15
docker/docker-compose.override.yml Normal file
View File

@ -0,0 +1,15 @@
---
version: '3'
services:
front:
environment:
- SERVER=http://127.0.0.1
ports:
- 80:80
server:
build:
args:
serve: http://127.0.0.1

39
docker/docker-compose.yml Normal file
View File

@ -0,0 +1,39 @@
---
version: '3'
services:
front:
build:
context: ../
dockerfile: docker/front.docker
environment:
- SERVER=http://server.org:8000
networks:
- web
server:
build:
context: ../
dockerfile: docker/djangoldp.docker
args:
serve: http://server.org:8000
networks:
web:
aliases:
- server.org
db:
e2e:
image: cypress/included:4.3.0
environment:
- CYPRESS_baseUrl=https://front
volumes:
- ../cypress:/cypress
- ../cypress.json:/cypress.json
networks:
- web
networks:
web:
db:

37
docker/front.docker Normal file
View File

@ -0,0 +1,37 @@
FROM node:12 AS builder
LABEL maintainer="Plup <plup@plup.io>"
# install dependencies
WORKDIR /build
ADD package.json package-lock.json ./
ADD src/ src/
RUN npm install --only=production
# build the app
ADD docker/config.json .
RUN npm run build
# change index to template
RUN mv /build/dist/index.html /build/dist/index.tpl
# generate a self signed certificate
RUN openssl req -x509 -newkey rsa:4096 -keyout /tmp/key.pem -out /tmp/cert.pem -days 365 -nodes -subj '/CN=localhost'
# serve
FROM nginx:latest
COPY --from=builder /build/dist /var/www
COPY --from=builder /tmp/*.pem /etc/nginx/
WORKDIR /var/www
# get specific config
COPY docker/nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 443
# get server address
ENV SERVER http://localhost:8000
# replace addresses at runtime
CMD /bin/bash -c "envsubst '\$SERVER' < index.tpl > index.html && \
exec nginx -g 'daemon off;'"
# vim: ft=dockerfile:

9
docker/nginx.conf Normal file
View File

@ -0,0 +1,9 @@
server {
listen 443 ssl default_server;
root /var/www/;
ssl_certificate /etc/nginx/cert.pem;
ssl_certificate_key /etc/nginx/key.pem;
try_files $uri $uri/ index.html =404;
}

27
docker/packages.yml Normal file
View File

@ -0,0 +1,27 @@
ldppackages:
djangoldp_dashboard: djangoldp_dashboard
djangoldp_account: djangoldp_account
djangoldp_circle: djangoldp_circle
djangoldp_notification: djangoldp_notification
djangoldp_profile: djangoldp_profile
djangoldp_project: djangoldp_project
oidc_provider: 'git+https://github.com/jblemee/django-oidc-provider.git@develop'
server:
site_url: SERVER
allowed_hosts:
- '*'
db_host: database
db_name: postgres
db_user: postgres
db_pass: postgres
smtp_host:
smtp_user:
smtp_pass:
admin_email: test@startinblox.com
admin_name: admin
admin_pass: admin
xmpp_url: https://jabber.happy-dev.fr
jabber_host: 'none'
default_client: SERVER
registration_open: True

1431
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

14
package.json
View File

@ -17,7 +17,11 @@
"watch": "run-p copy:* watch:* serve", "watch": "run-p copy:* watch:* serve",
"watch:css": "npm run build:css && npm run build:css -- -w", "watch:css": "npm run build:css && npm run build:css -- -w",
"watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js", "watch:js": "babel --watch \"src/scripts/*.js\" -o dist/scripts/index.js",
"watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json" "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json",
"cypress:open": "cypress open",
"cypress:verify": "cypress verify",
"cypress:info": "cypress info",
"test": "cypress run"
}, },
"release": { "release": {
"branches": [ "branches": [
@ -50,14 +54,18 @@
}, },
"dependencies": { "dependencies": {
"@babel/cli": "^7.7.0", "@babel/cli": "^7.7.0",
"@babel/core": "^7.7.0", "@babel/core": "^7.9.0",
"copyfiles": "^2.1.1", "copyfiles": "^2.1.1",
"include-media": "^1.4.9", "include-media": "^1.4.9",
"node-sass": "^4.13.0", "node-sass": "^4.14.0",
"normalize.css": "^8.0.1", "normalize.css": "^8.0.1",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"pug": "^2.0.4", "pug": "^2.0.4",
"pug-cli": "^1.0.0-alpha6", "pug-cli": "^1.0.0-alpha6",
"pushstate-server": "^3.1.0" "pushstate-server": "^3.1.0"
},
"devDependencies": {
"cypress": "^4.5.0",
"cypress-terminal-report": "^1.2.1"
} }
} }

2
src/styles/abstracts/_mixins.scss
View File

@ -1,4 +1,4 @@
@mixin window-style-modal($background: $color-0-0-100, $shadow: hsla(212, 7%, 55%, 0.19)) { @mixin window-style-modal($background: var(--color-white), $shadow: hsla(212, 7%, 55%, 0.19)) {
box-shadow: 0 0 8px 0 $shadow; box-shadow: 0 0 8px 0 $shadow;
background-color: $background; background-color: $background;
} }

149
src/styles/abstracts/_variables.scss
View File

@ -1,32 +1,127 @@
// Color Variables // Color Variables
$color-43-100-50: hsl(43, 100%, 50%); :root {
$color-45-95-54: hsl(45, 95%, 54%); --color-primary: #FF6765;
$color-46-100-67: hsl(46, 100%, 67%); --color-secondary: #46271B;
$color-46-100-50: hsl(46, 100%, 50%); --color-complementary: #5BB4CE;
$color-0-0-100: hsl(0, 0%, 100%); --color-complementary-darken: #35A0C0;
$color-218-100-98: hsl(218, 100%, 98%);
$color-210-17-91: hsl(210, 17%, 91%); --color-white: hsl(0, 0%, 100%);
$color-222-52-90: hsl(222, 52%, 90%);
$color-210-25-95: hsl(210, 25%, 95%); --color-black-h: 16;
$color-222-57-95: hsl(222, 57%, 95%); --color-black-s: 45%;
$color-213-20-91: hsl(213, 20%, 91%); --color-black-l: 6%;
$color-221-51-90: hsl(221, 51%, 90%); --color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */
$color-228-25-79: hsl(228, 25%, 79%);
$color-0-0-85: hsl(0, 0%, 85%); /* Fifty shades of greys */
$color-229-25-79: hsl(229, 25%, 79%); --color-grey-1: hsl(calc(var(--color-black-h) + 200), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 16%)); /*hsl(216, 4%, 22%); #36383B */
$color-215-9-73: hsl(215, 9%, 73%); --color-grey-2: hsl(calc(var(--color-black-h) + 217), calc(var(--color-black-s) - 27%), calc(var(--color-black-l) + 23%)); /*hsl(233, 18%, 29%); #3C3F57 */
$color-244-10-70: hsl(244, 10%, 70%); --color-grey-3: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 23%)); /*hsl(0, 0%, 29%); #4A4A4A */
$color-215-6-63: hsl(215, 6%, 63%); --color-grey-4: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 43%), calc(var(--color-black-l) + 43%)); /*hsl(0, 2%, 49%); #807A7A */
$color-210-5-56: hsl(210, 5%, 56%); --color-grey-5: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 44%)); /*hsl(213, 4%, 50%); #7A7F85 */
$color-210-4-50: hsl(210, 4%, 50%); --color-grey-6: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 41%), calc(var(--color-black-l) + 57%)); /*hsl(0, 4%, 63%); #A59D9D */
--color-grey-7: hsl(calc(var(--color-black-h) + 228), calc(var(--color-black-s) + 35%), calc(var(--color-black-l) + 64%)); /*hsl(244, 10%, 70%); #ABAABA */
--color-grey-8: hsl(calc(var(--color-black-h) + 212), calc(var(--color-black-s) - 20%), calc(var(--color-black-l) + 73%)); /*hsl(228, 25%, 79%); #BDC2D7 */
--color-grey-9: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 36%), calc(var(--color-black-l) + 76%)); /*hsl(0, 9%, 82%); #D6CECE */
--color-grey-10: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 42%), calc(var(--color-black-l) + 87%)); /*hsl(0, 3%, 93%); #EEEDED */
--color-grey-11: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 32%), calc(var(--color-black-l) + 80%)); /*hsl(213, 13%, 86%); #D7DBE0 */
--color-grey-12: hsl(calc(var(--color-black-h) + 197), calc(var(--color-black-s) - 25%), calc(var(--color-black-l) + 85%)); /*hsl(213, 20%, 91%); #E4E8ED */
--color-grey-13: hsl(calc(var(--color-black-h) - 16), calc(var(--color-black-s) - 45%), calc(var(--color-black-l) + 90%)); /*hsl(0, 0%, 96%); #F4F4F4 */
/* CUSTOM COLORS FOR CLIENT */
--color-main-background: var(--color-grey-13);
--color-main-text: var(--color-grey-4);
--color-highlight-primary: var(--color-primary);
--color-user-panel: var(--color-black);
--color-bell: var(--color-secondary);
--color-avatar-background: var(--color-grey-11);
--color-title: var(--color-secondary);
--color-h1: var(--color-secondary);
--color-h2: var(--color-secondary);
/* Header's elements */
--color-header-background: var(--color-white);
--color-bell: var(--color-secondary);
--color-user-panel-header-text: var(--color-secondary);
--color-user-panel-header-background: var(--color-white);
--color-user-panel-header-text-open: var(--color-white);
--color-user-panel-header-background-open: var(--color-secondary);
--color-user-panel-list-background: var(--color-white);
--color-user-panel-list-text-hover: var(--color-primary);
--color-user-panel-list-border: var(--color-grey-12);
/* Left menu */
--color-menu-highlight-primary: var(--color-highlight-primary);
--color-menu-background: var(--color-secondary);
--color-menu-text: var(--color-white);
--color-menu-text-active: var(--color-white);
--color-menu-background-active: var(--color-menu-highlight-primary);
--color-menu-badge-background: var(--color-secondary);
--color-menu-badge-text-active: var(--color-menu-text-active);
--color-menu-badge-background-active: var(--color-complementary);
--color-menu-icon-background-active: var(--color-secondary);
/* Right menu */
--color-right-menu-background: var(--color-grey-10);
--color-right-menu-text: var(--color-secondary);
--color-right-menu-link-border: var(--color-grey-9);
--color-right-menu-active-text: var(--color-white);
--color-right-menu-active-background: var(--color-secondary);
--color-right-menu-active-icon: var(--color-white);
/* Scrollbar */
--color-scrollbar-right-background: var(--color-white);
--color-scrollbar-right-track: var(--color-grey-9);
--color-scrollbar-left-background: var(--color-secondary);
--color-scrollbar-left-track: var(--color-grey-11);
/* tags */
--color-tag-admin-text: var(--color-complementary);
--color-tag-admin-border: var(--color-complementary);
--color-tag-group-text: var(--color-primary);
--color-tag-group-border: var(--color-primary);
/* Form elements */
--color-button-white: var(--color-white);
--color-button-primary: var(--color-primary);
--color-button-secondary: var(--color-secondary);
--color-button-complementary: var(--color-complementary);
--color-input-background: var(--color-grey-10);
--color-input-text: var(--color-secondary);
--color-input-icon: var(--color-secondary);
--color-input-active: var(--color-secondary);
--color-fieldset: var(--color-title);
--color-fieldset-border: var(--color-grey-10);
--color-button-modal: var(--color-title);
--color-select-list: var(--color-secondary);
--color-select-add-button: var(--color-button-secondary);
--color-select-add-button-background: var(--color-button-white);
--color-label-dark: var(--color-secondary);
--color-label-light: var(--color-grey-6);
/* skill */
--color-skill-background: var(--color-primary);
--color-skill-text: var(--color-white);
/* icon */
--color-icon: var(--color-complementary);
/* Table */
--color-table-header-background: var(--color-grey-6);
--color-table-header-text: var(--color-white);
--color-table-border: var(--color-grey-8);
/* User thumb */
--color-user-thumb-name: var(--color-grey-4);
--color-backlink: var(--color-secondary);
--color-content-header: var(--color-grey-9);
}
/* Variables for event */
$color-212-4-50: hsl(212.7,4.3%,50%); $color-212-4-50: hsl(212.7,4.3%,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-0-0-22: hsl(0,0%,22.7%); $color-0-0-22: hsl(0,0%,22.7%);
$color-203-87-19: hsl(203, 87.8%, 19.2%); $color-203-87-19: hsl(203, 87.8%, 19.2%);
$color-233-18-29: hsl(233, 18%, 29%);
$color-233-20-17: hsl(233, 20%, 17%);
$color-216-4-22: hsl(216, 4%, 22%);
$color-244-73-62: hsl(244, 73%, 62%);
$color-357-67-45: hsl(357,67.5%,45.9%); $color-357-67-45: hsl(357,67.5%,45.9%);

71
src/styles/base/form.scss
View File

@ -8,7 +8,7 @@
.text-bold, .text-bold,
.text-uppercase, .text-uppercase,
.reversed, .reversed,
.button-dark, .button-secondary,
.bordered; .bordered;
margin-left: auto; margin-left: auto;
margin-top: 3.2rem; margin-top: 3.2rem;
@ -20,7 +20,7 @@
&.with-form { &.with-form {
h1 { h1 {
color: $color-233-18-29; color: var(--color-title);
font-weight: bold; font-weight: bold;
font-size: 2rem; font-size: 2rem;
@ -30,8 +30,8 @@
} }
.fieldset { .fieldset {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid var(--color-fieldset-border);
color: $color-233-18-29; color: var(--color-title);
display: flex; display: flex;
flex: 1 0 100%; flex: 1 0 100%;
font-size: 1.8rem; font-size: 1.8rem;
@ -45,7 +45,7 @@
} }
[name$='border-top'] { [name$='border-top'] {
border-top: 1px solid $color-221-51-90; border-top: 1px solid var(--color-grey-10);
margin-top: 3rem; margin-top: 3rem;
} }
@ -72,11 +72,11 @@
input:not([type='file']), input:not([type='file']),
textarea { textarea {
-webkit-tap-highlight-color: $color-244-73-62; -webkit-tap-highlight-color: var(--color-grey-7);
background-color: $color-222-57-95; background-color: var(--color-input-background);
box-sizing: border-box; box-sizing: border-box;
border: 2px solid $color-222-57-95; border: 2px solid var(--color-input-background);
color: $color-233-18-29; color: var(--color-input-text);
/*flex: 1 1 0; Problem on Firefox for input type date*/ /*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1; line-height: 1;
min-width: 0; min-width: 0;
@ -85,11 +85,11 @@
input:not([type="search"]):not([type="file"]), input:not([type="search"]):not([type="file"]),
textarea { textarea {
border: 2px solid $color-222-57-95; border: 2px solid var(--color-input-background);
&:focus, &:focus,
&:active { &:active {
border-bottom: 2px solid $color-244-73-62; border-bottom: 2px solid var(--color-input-active);
} }
} }
@ -127,9 +127,10 @@
>.ss-single-selected { >.ss-single-selected {
align-items: center; align-items: center;
background-color: #ebeffa; background-color: var(--color-input-background);
border: none; border: none;
border-radius: 0px; border-radius: 0px;
color: var(--color-input-text);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
min-height: 4.2rem; min-height: 4.2rem;
@ -140,11 +141,15 @@
margin: 0 18px 0 0; margin: 0 18px 0 0;
span { span {
border: solid $color-244-73-62; border: solid var(--color-input-icon);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
} }
} }
} }
.ss-list {
color: var(--color-select-list);
}
} }
} }
@ -154,7 +159,7 @@
.btn-margin-left, .btn-margin-left,
.text-bold, .text-bold,
.text-uppercase, .text-uppercase,
.button-blue, .button-complementary,
.bordered; .bordered;
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
@ -172,7 +177,7 @@
.text-bold, .text-bold,
.text-uppercase, .text-uppercase,
.reversed, .reversed,
.button-dark, .button-secondary,
.bordered; .bordered;
margin-left: auto; margin-left: auto;
margin-top: 3.2rem; margin-top: 3.2rem;
@ -184,7 +189,7 @@
font-weight: 600; font-weight: 600;
&.is-dark label { &.is-dark label {
color: $color-216-4-22; color: var(--color-label-dark);
margin-top: 3rem; margin-top: 3rem;
&>*:nth-child(2) { &>*:nth-child(2) {
@ -193,7 +198,7 @@
} }
&.is-light label { &.is-light label {
color: $color-244-10-70; color: var(--color-label-light);
margin-top: 1.8rem; margin-top: 1.8rem;
text-transform: uppercase; text-transform: uppercase;
@ -230,9 +235,10 @@
} }
.ss-single-selected { .ss-single-selected {
background-color: $color-222-57-95; background-color: var(--color-input-background);
border: none; border: none;
border-radius: 0px; border-radius: 0px;
color: var(--color-input-text);
display: flex; display: flex;
font-weight: normal; font-weight: normal;
margin-top: 0.8rem; margin-top: 0.8rem;
@ -240,13 +246,18 @@
padding-left: 1rem; padding-left: 1rem;
text-transform: none; text-transform: none;
.ss-disabled {
color: var(--color-grey-5);
}
.ss-arrow span { .ss-arrow span {
border: solid $color-244-73-62; border: solid var(--color-input-icon);
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
} }
} }
.ss-content .ss-list .ss-option { .ss-content .ss-list .ss-option {
color: var(--color-input-text);
font-weight: normal; font-weight: normal;
text-transform: none; text-transform: none;
} }
@ -258,7 +269,7 @@
background-position: right 12px top 50%; background-position: right 12px top 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 1.4rem; background-size: 1.4rem;
color: $color-213-4-50; color: var(--color-input-icon);
cursor: default; cursor: default;
font-size: 1.4rem; font-size: 1.4rem;
margin-top: 1.6rem; margin-top: 1.6rem;
@ -308,7 +319,7 @@
input[type='file'] { input[type='file'] {
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 20%; flex: 0 0 20%;
color: $color-244-73-62; color: var(--color-input-text);
cursor: pointer; cursor: pointer;
padding-left: 3rem; padding-left: 3rem;
} }
@ -342,7 +353,7 @@
.ss-multi-selected { .ss-multi-selected {
align-items: center; align-items: center;
background-color: $color-222-57-95; background-color: var(--color-input-background);
border: none; border: none;
border-radius: 0px; border-radius: 0px;
display: flex; display: flex;
@ -355,10 +366,10 @@
margin: 0 18px 0 0; margin: 0 18px 0 0;
span.ss-plus { span.ss-plus {
background: $color-244-73-62; background: var(--color-input-icon);
&::after { &::after {
background: $color-244-73-62; background: var(--color-input-icon);
} }
} }
} }
@ -377,7 +388,7 @@
top: calc(-6rem + 7px); top: calc(-6rem + 7px);
&::before { &::before {
color: $color-213-4-50; color: var(--color-grey-5);
font-weight: normal; font-weight: normal;
} }
} }
@ -392,6 +403,10 @@
} }
} }
} }
.ss-list {
color: var(--color-input-text);
}
} }
} }
} }
@ -414,9 +429,9 @@
} }
input[type='submit'] { input[type='submit'] {
background-color: transparent; background-color: var(--color-select-add-button-background);
border: 1px solid $color-244-73-62; border: 1px solid var(--color-select-add-button);
color: $color-244-73-62; color: var(--color-select-add-button);
} }
} }
} }

31
src/styles/base/header.scss
View File

@ -2,8 +2,8 @@
max-height: 83px; max-height: 83px;
height: 83px; height: 83px;
align-items: center; align-items: center;
background-color: $color-0-0-100; background-color: var(--color-header-background);
color: $color-216-4-22; color: var(--color-black);
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;
@ -22,14 +22,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-215-9-73; border: 1px solid var(--color-grey-10);
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-215-9-73; color: var(--color-grey-10);
display: block; display: block;
font-size: 1.7rem; font-size: 1.7rem;
margin: auto; margin: auto;
@ -37,7 +37,7 @@
right: 3.7rem; right: 3.7rem;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
-webkit-text-stroke: 1px $color-215-9-73; -webkit-text-stroke: 1px var(--color-grey-10);
} }
& ~ #close-search-icon { & ~ #close-search-icon {
@ -57,6 +57,7 @@
} }
sib-notifications { sib-notifications {
color: var(--color-bell);
@include breakpoint(sm) { @include breakpoint(sm) {
padding: 0; padding: 0;
@ -126,8 +127,8 @@
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */ display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
&:focus { &:focus {
background-color: $color-233-18-29; background-color: var(--color-user-panel-header-background-open);
color: $color-0-0-100; color: var(--color-user-panel-header-text-open);
outline: none; outline: none;
} }
} }
@ -143,7 +144,7 @@
hubl-user-avatar { hubl-user-avatar {
align-items: center; align-items: center;
background-color: $color-213-20-91; background-color: var(--color-avatar-background);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
height: 4.8rem; height: 4.8rem;
@ -198,7 +199,7 @@
top: 83px; top: 83px;
> nav { > nav {
background-color: $color-0-0-100; background-color: var(--color-user-panel-list-background);
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;
@ -213,20 +214,20 @@
li { li {
sib-link { sib-link {
color: $color-213-4-50; color: var(--color-grey-4);
display: block; display: block;
border-bottom: 1px solid $color-213-20-91; border-bottom: 1px solid var(--color-user-panel-list-border);
margin-right: 0; margin-right: 0;
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;
&:hover { &:hover {
color: $color-244-73-62; color: var(--color-user-panel-list-text-hover);
} }
} }
} }
} }
button { button {
color: $color-213-4-50; color: var(--color-grey-4);
padding: 1.6rem 1.3rem; padding: 1.6rem 1.3rem;
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -235,8 +236,8 @@
} }
&[open] { &[open] {
background-color: $color-233-18-29; background-color: var(--color-user-panel-header-background);
color: $color-0-0-100; color: var(--color-user-panel-header-text);
#user-controls__profile { #user-controls__profile {

129
src/styles/base/main.scss
View File

@ -5,11 +5,11 @@
:root { :root {
font-size: 10px; font-size: 10px;
font-family: Open Sans, sans-serif; font-family: Open Sans, sans-serif;
--sib-notifications-theme: #{$color-46-100-50}; --sib-notifications-theme: var(--color-primary);
body { body {
background-color: $color-210-25-95; background-color: var(--color-main-background);
color: $color-213-4-50; color: var(--color-main-text);
font-size: 1.6rem; font-size: 1.6rem;
min-height: 100vh; min-height: 100vh;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -43,16 +43,16 @@ nav, .views-container {
/* Custom scrollbar of the left-menu */ /* Custom scrollbar of the left-menu */
nav { nav {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $color-244-10-70 $color-233-18-29; scrollbar-color: var(--color-scrollbar-left-track) var(--color-scrollbar-left-background);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: $color-233-18-29; background: var(--color-scrollbar-left-background);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $color-244-10-70; background-color: var(--color-scrollbar-left-track);
border-radius: 6px; border-radius: 6px;
border: 3px solid $color-233-18-29; border: 3px solid var(--color-scrollbar-left-background);
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -63,16 +63,16 @@ nav {
/* Custom scrollbar of the content */ /* Custom scrollbar of the content */
.views-container { .views-container {
scrollbar-width: thin; scrollbar-width: thin;
scrollbar-color: $color-244-10-70 white; scrollbar-color: var(--color-scrollbar-right-track) var(--color-scrollbar-right-background);
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: white; background: var(--color-scrollbar-right-background);
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: $color-244-10-70; background-color: var(--color-scrollbar-right-track);
border-radius: 6px; border-radius: 6px;
border: 3px solid white; border: 3px solid var(--color-scrollbar-right-background);
} }
&::-webkit-scrollbar { &::-webkit-scrollbar {
@ -118,7 +118,7 @@ h6 {
} }
h1, .h1-like { h1, .h1-like {
color: $color-233-18-29; color: var(--color-h1);
font-size: 2rem; font-size: 2rem;
text-transform: uppercase; text-transform: uppercase;
@ -128,7 +128,7 @@ h1, .h1-like {
} }
h2, .h2-like { h2, .h2-like {
color: $color-216-4-22; color: var(--color-h2);
font-size: 1.8rem; font-size: 1.8rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -140,7 +140,7 @@ h2, .h2-like {
} }
h3 { h3 {
color: $color-216-4-22; color: var(--color-title);
font-size: 1.7rem; font-size: 1.7rem;
} }
@ -168,7 +168,7 @@ h5 {
margin: 2rem 1rem 5rem 2rem; margin: 2rem 1rem 5rem 2rem;
&.full-width { &.full-width {
background: $color-0-0-100; background: var(--color-white);
flex: 1; flex: 1;
font-size: 1.6rem; font-size: 1.6rem;
margin: 0 auto; margin: 0 auto;
@ -182,11 +182,11 @@ h5 {
/* Header inside circle, project view */ /* Header inside circle, project view */
.content-box__header { .content-box__header {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid var(--color-content-header);
padding: 3rem; padding: 3rem;
@include breakpoint(sm) { @include breakpoint(sm) {
background: $color-221-51-90; background: var(--color-grey-10);
} }
sib-display { sib-display {
@ -198,7 +198,7 @@ h5 {
.mobile-sidebar-button { .mobile-sidebar-button {
@include breakpoint(sm) { @include breakpoint(sm) {
float: right; float: right;
color: $color-233-18-29; color: var(--color-secondary);
font-size: 1.8rem; font-size: 1.8rem;
font-weight: bold!important; font-weight: bold!important;
@ -220,7 +220,7 @@ h5 {
font-size: 1.8rem; font-size: 1.8rem;
&:not(:empty)::before { &:not(:empty)::before {
color: $color-233-18-29; color: var(--color-grey-4);
content: ' - '; content: ' - ';
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
@ -228,12 +228,12 @@ h5 {
} }
.description { .description {
color: $color-215-6-63; color: var(--color-grey-4);
} }
.name { .name {
color: $color-233-18-29; color: var(--color-grey-4);
font-weight: normal; font-weight: normal;
} }
} }
@ -246,7 +246,7 @@ h5 {
} }
.modal { .modal {
color: white; color: var(--color-white);
margin: 75px; margin: 75px;
padding: 40px; padding: 40px;
max-height: 85vh; max-height: 85vh;
@ -263,14 +263,14 @@ h5 {
top: 32px; top: 32px;
button { button {
color: $color-233-18-29; color: var(--color-secondary);
} }
} }
} }
.backlink { .backlink {
@include icon('arrow-left-circle'); @include icon('arrow-left-circle');
color: $color-233-18-29; color: var(--color-backlink);
font-size: 1.5rem; font-size: 1.5rem;
margin: 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
text-decoration: underline; text-decoration: underline;
@ -288,7 +288,7 @@ h5 {
} }
.name { .name {
color: $color-216-4-22; color: var(--color-grey-1);
font-size: 2rem; font-size: 2rem;
font-weight: bold; font-weight: bold;
} }
@ -311,7 +311,7 @@ h5 {
} }
.section { .section {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid var(--color-grey-10);
padding: 4.5rem; padding: 4.5rem;
} }
@ -407,61 +407,61 @@ a,
margin-right: 1rem; margin-right: 1rem;
} }
&.button-yellow { &.button-primary{
background-color: white; background-color: var(--color-white);
*, *,
& { & {
color: $color-43-100-50; color: var(--color-primary);
} }
&.bordered { &.bordered {
border: 1px solid $color-43-100-50; border: 1px solid var(--color-primary);
} }
&:hover { &:hover {
background-color: $color-43-100-50; background-color: var(--color-primary);
*, *,
& { & {
color: white; color: var(--color-white);
} }
} }
} }
&.button-blue { &.button-secondary {
background-color: white; background-color: var(--color-white);
*, *,
& { & {
color: $color-244-73-62; color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid $color-244-73-62; border: 1px solid var(--color-secondary);
} }
&:hover { &:hover {
background-color: $color-244-73-62; background-color: var(--color-secondary);
*, *,
& { & {
color: white; color: var(--color-white);
} }
} }
} }
&.button-dark { &.button-complementary {
color: $color-233-18-29; color: var(--color-complementary);
background-color: white; background-color: var(--color-white);
&.bordered { &.bordered {
border: 1px solid $color-233-18-29; border: 1px solid var(--color-complementary);
} }
&:hover { &:hover {
background-color: $color-233-18-29; background-color: var(--color-complementary);
color: white; color: var(--color-white);
} }
} }
@ -470,64 +470,69 @@ a,
} }
&.reversed { &.reversed {
&.button-yellow { &.button-primary {
background-color: $color-43-100-50; background-color: var(--color-primary);
*, *,
& { & {
color: white; color: var(--color-white);
} }
&:hover { &:hover {
background-color: white; background-color: var(--color-white);
color: $color-43-100-50; color: var(--color-primary);
*,
& {
color: var(--color-primary);
}
&.bordered { &.bordered {
border: 1px solid $color-43-100-50; border: 1px solid var(--color-primary);
} }
} }
} }
&.button-blue { &.button-secondary {
background-color: $color-244-73-62; background-color: var(--color-secondary);
*, *,
& { & {
color: white; color: var(--color-white);
} }
&:hover { &:hover {
background-color: white; background-color: var(--color-white);
*, *,
& { & {
color: $color-244-73-62; color: var(--color-secondary);
} }
&.bordered { &.bordered {
border: 1px solid $color-244-73-62; border: 1px solid var(--color-secondary);
} }
} }
} }
&.button-dark { &.button-complementary {
background-color: $color-233-18-29; background-color: var(--color-complementary);
*, *,
& { & {
color: white; color: var(--color-white);
} }
&:hover { &:hover {
background-color: white; background-color: var(--color-white);
*, *,
& { & {
color: $color-233-18-29; color: var(--color-complementary);
} }
&.bordered { &.bordered {
border: 1px solid $color-233-18-29; border: 1px solid var(--color-complementary);
} }
} }
} }

27
src/styles/base/menu-left.scss
View File

@ -1,6 +1,6 @@
#main__menu { #main__menu {
background-color: $color-233-18-29; background-color: var(--color-menu-background);
color: $color-0-0-100; color: var(--color-menu-text);
display: block; display: block;
max-width: 250px; max-width: 250px;
min-height: calc(100vh - 83px); /* 83px = nav height */ min-height: calc(100vh - 83px); /* 83px = nav height */
@ -36,17 +36,14 @@
padding: 1.2rem; padding: 1.2rem;
&[active] { &[active] {
background-color: $color-46-100-67; background-color: var(--color-menu-highlight-primary);
color: $color-233-18-29;
.menu-icon:before { .menu-icon:before {
background-color: $color-233-18-29; background-color: var(--color-menu-icon-background-active);
color: $color-0-0-100;
} }
.menu-notification > sib-display > div:first-child { .menu-notification > sib-display > div:first-child {
background-color: $color-233-18-29; background-color: var(--color-menu-badge-background);
color: $color-46-100-67;
} }
} }
@ -81,7 +78,6 @@
.menu-chevron { .menu-chevron {
align-items: center; align-items: center;
color: $color-244-10-70;
display: flex; display: flex;
flex-grow: 0; flex-grow: 0;
flex-shrink: 0; flex-shrink: 0;
@ -136,7 +132,7 @@
sib-display>div { sib-display>div {
.create { .create {
color: $color-244-10-70; color: var(--color-white);
margin: 1rem 1rem 2.2rem 3.2rem; margin: 1rem 1rem 2.2rem 3.2rem;
} }
@ -147,7 +143,7 @@
} }
>div { >div {
color: $color-244-10-70; color: var(--color-grey-6);
cursor: pointer; cursor: pointer;
>hubl-menu-fix-url-circle>sib-display>div, >hubl-menu-fix-url-circle>sib-display>div,
>hubl-menu-fix-url-project>sib-display>div { >hubl-menu-fix-url-project>sib-display>div {
@ -163,8 +159,8 @@
&>sib-display[active]>div, &>sib-display[active]>div,
&>sib-display>div>hubl-menu-fix-url-circle>sib-display[active]>div, &>sib-display>div>hubl-menu-fix-url-circle>sib-display[active]>div,
&>sib-display>div>hubl-menu-fix-url-project>sib-display[active]>div { &>sib-display>div>hubl-menu-fix-url-project>sib-display[active]>div {
background-color: $color-46-100-67; background-color: var(--color-menu-highlight-primary);
color: $color-233-18-29; color: var(--color-menu-text-active);
font-weight: bold; font-weight: bold;
} }
} }
@ -195,7 +191,7 @@
width: 20px; width: 20px;
height: 20px; height: 20px;
padding-bottom: 0; padding-bottom: 0;
color: $color-216-4-22; color: var(--color-secondary);
} }
} }
} }
@ -204,7 +200,8 @@
.divider { .divider {
height: 1px; height: 1px;
background-color: $color-213-13-86; background-color: var(--color-grey-11);
opacity: 0.2;
} }
} }

20
src/styles/base/table.scss
View File

@ -22,19 +22,19 @@
text-align: center; text-align: center;
&.grey-color { &.grey-color {
background: $color-228-25-79; background: var(--color-table-header-background);
color: white; color: var(--color-table-header-text);
} }
>* { >* {
border-right: 1px solid white; border-right: 1px solid var(--color-table-border);
//flex: 1; flex: 1;
padding: 2.1rem 0; padding: 2.1rem 0;
text-align: center; text-align: center;
} }
>*:last-of-type { >*:last-of-type {
border-right: 1px solid $color-228-25-79; border-right: 1px solid --color-table-header-background;
} }
} }
@ -43,12 +43,12 @@
>div:first-of-type>sib-display>div, >div:first-of-type>sib-display>div,
hubl-team-template-edit[name='members'] { hubl-team-template-edit[name='members'] {
display: flex; display: flex;
border-left: 1px solid $color-228-25-79; border-left: 1px solid var(--color-table-border);
} }
.border { .border {
border-bottom: 1px solid $color-228-25-79; border-bottom: 1px solid var(--color-table-border);
border-right: 1px solid $color-228-25-79; border-right: 1px solid var(--color-table-border);
} }
.cell { .cell {
@ -94,7 +94,7 @@
.text-bold, .text-bold,
.text-uppercase, .text-uppercase,
.reversed, .reversed,
.button-blue, .button-secondary,
.bordered, .bordered,
.btn-margin-left; .btn-margin-left;
} }
@ -102,7 +102,7 @@
} }
.cell-with-name { .cell-with-name {
color: $color-233-18-29; color: var(--color-secondary);
font-weight: 600; font-weight: 600;
padding-top: 2.5rem; padding-top: 2.5rem;
} }

8
src/styles/base/user-thumb.scss
View File

@ -24,7 +24,7 @@
%user-thumb__picture { %user-thumb__picture {
align-items: center; align-items: center;
align-self: center; align-self: center;
background-color: $color-213-20-91; background-color: var(--color-avatar-background);
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
grid-column: 1 / span 1; grid-column: 1 / span 1;
@ -52,7 +52,7 @@
} }
%user-thumb__name { %user-thumb__name {
color: #7A7F85; color: var(--color-user-thumb-name);
font-weight: 600; font-weight: 600;
margin-right: 1rem; margin-right: 1rem;
} }
@ -88,7 +88,7 @@
margin-right: 1.6rem; margin-right: 1.6rem;
&::before { &::before {
color: $color-43-100-50; color: var(--color-icon);
margin-right: 0.50rem; margin-right: 0.50rem;
} }
} }
@ -99,7 +99,7 @@
display: flex; display: flex;
&::before { &::before {
color: $color-43-100-50; color: var(--color-icon);
font-size: 1.9rem; font-size: 1.9rem;
font-weight: bold; font-weight: bold;
margin-left: 0; margin-left: 0;

4
src/styles/components/comment.scss
View File

@ -1,4 +1,4 @@
#job-offers { /* #job-offers {
details { details {
@ -119,4 +119,4 @@
} }
} }
} }
} }*/

4
src/styles/components/filters.scss
View File

@ -1,4 +1,4 @@
%filters { /*%filters {
display: grid; display: grid;
grid-gap: 0px 15px; grid-gap: 0px 15px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
@ -56,4 +56,4 @@
sib-form[naked] { sib-form[naked] {
@extend %filters; @extend %filters;
} }
} }*/

17
src/styles/components/sidebar.scss
View File

@ -27,13 +27,12 @@
} }
nav { nav {
background: $color-210-25-95; background: var(--color-right-menu-background);
transition: all 0.5s; transition: all 0.5s;
width: 25rem; width: 25rem;
>sib-router { >sib-router {
background-color: $color-222-52-90; color: var(--color-right-menu-text);
color: $color-233-18-29;
flex: 0 0 auto; flex: 0 0 auto;
font-weight: 600; font-weight: 600;
@ -47,7 +46,7 @@
li { li {
align-items: center; align-items: center;
border-bottom: 1px solid $color-229-25-79; border-bottom: 1px solid var(--color-right-menu-link-border);
display: flex; display: flex;
margin: 0; margin: 0;
padding: 2.15rem 2.55rem; padding: 2.15rem 2.55rem;
@ -104,7 +103,7 @@
} }
&[name='admin-users']>li::before { &[name='admin-users']>li::before {
background-color: $color-233-18-29; background-color: var(--color-secondary);
content: ''; content: '';
display: inline-block; display: inline-block;
height: 40px; height: 40px;
@ -124,14 +123,14 @@
} }
&[active] { &[active] {
background-color: $color-233-18-29; background-color: var(--color-right-menu-active-background);
color: $color-46-100-67; color: var(--color-right-menu-active-text);
display: inline-block; display: inline-block;
} }
&.active-color[active] { &.active-color[active] {
>li::before { >li::before {
background-color: #ffd857; background-color: var(--color-right-menu-active-icon);
} }
} }
} }
@ -157,7 +156,7 @@
@include breakpoint(sm) { @include breakpoint(sm) {
display: block; display: block;
background: $color-221-51-90; background: var(--color-right-menu-background);
bottom: 0; bottom: 0;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12); box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
min-width: 60%; min-width: 60%;

6
src/styles/components/skills.scss
View File

@ -4,10 +4,10 @@ sib-multiple[name*='skills'] {
} }
.skill { .skill {
background-color: $color-43-100-50; background-color: var(--color-skill-background);
border: 1px solid $color-43-100-50; border: 1px solid var(--color-skill-background);
border-radius: 2em; border-radius: 2em;
color: $color-0-0-100; color: var(--color-skill-text);
display: block; display: block;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;

8
src/styles/components/tags.scss
View File

@ -1,7 +1,7 @@
%tag-role { %tag-role {
border: 1px solid $color-45-95-54; border: 1px solid var(--color-tag-group-border);
border-radius: 3px; border-radius: 3px;
color: $color-210-4-50; color: var(--color-tag-group-text);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
margin-right: 0.6rem; margin-right: 0.6rem;
@ -9,9 +9,9 @@
} }
%tag-admin { %tag-admin {
border: 1px solid $color-244-73-62; border: 1px solid var(--color-tag-admin-border);
border-radius: 3px; border-radius: 3px;
color: $color-244-73-62; color: var(--color-tag-admin-text);
font-size: 1.4rem; font-size: 1.4rem;
font-weight: 400; font-weight: 400;
margin-left: 0.6rem; margin-left: 0.6rem;

4
src/styles/layout/job-offers/job-offers.scss
View File

@ -1,4 +1,4 @@
.job-offers__container { /*.job-offers__container {
@extend %grid-layer; @extend %grid-layer;
} }
@ -202,5 +202,5 @@ sib-action[name='edit'] {
@include icon('pencil'); @include icon('pencil');
font-size: 2rem; font-size: 2rem;
} }
} }*/

4
src/styles/layout/members/member-profile.scss
View File

@ -1,4 +1,4 @@
#member-profile { /*#member-profile {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
@ -149,4 +149,4 @@
} }
} }
} }
} }*/

4
src/styles/layout/members/members.scss
View File

@ -1,4 +1,4 @@
%member-info { /*%member-info {
sib-multiple[name^='user.'], sib-multiple[name^='user.'],
>member-info>div, >member-info>div,
@ -239,4 +239,4 @@ member-info-groups {
} }
} }
} }
} }*/

8
src/styles/layout/project/project-profile.scss
View File

@ -6,7 +6,7 @@
} }
.button-question__color { .button-question__color {
color: $color-216-4-22; color: var(--color-secondary);
} }
.customer-box { .customer-box {
@ -14,7 +14,7 @@
margin: 1.6rem 0; margin: 1.6rem 0;
>* { >* {
border: 1px solid $color-221-51-90; border: 1px solid var(--color-grey-8);
flex: 0 1 50%; flex: 0 1 50%;
padding: 1.7rem 2rem; padding: 1.7rem 2rem;
@ -94,7 +94,7 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
span::before { span::before {
color: $color-43-100-50; color: var(--color-primary);
font-size: 2.2rem; font-size: 2.2rem;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
} }
@ -103,7 +103,7 @@
font-weight: bold; font-weight: bold;
&.link-color { &.link-color {
color: $color-244-73-62; color: var(--color-complementary);
} }
&.norm-weight { &.norm-weight {

12
src/styles/layout/user/user-profile.scss
View File

@ -1,4 +1,4 @@
.user-profile__container { /*.user-profile__container {
.user-bio { .user-bio {
display: grid; display: grid;
@ -42,10 +42,10 @@
} }
.info-form { .info-form {
grid-area: information; grid-area: information; */
/* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */ /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
[name="account.picture"] { /*[name="account.picture"] {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -60,9 +60,9 @@
p { p {
margin-left: 1rem; margin-left: 1rem;
} }
} }*/
/* Fin commentaire sur upload photos */ /* Fin commentaire sur upload photos */
} /*}
[name^="inline-"] { [name^="inline-"] {
display: flex; display: flex;
@ -73,4 +73,4 @@
} }
} }
} }
} }*/

2
src/views/admin/page-admin-circles-create.pug
View File

@ -12,7 +12,7 @@ div.content-box__info
class-description='form-label is-light is-full-width' class-description='form-label is-light is-full-width'
label-name='Nom du canal *' label-name='Nom du canal *'
label-description='Sous-titre du canal' label-description='Sous-titre du canal *'
next='admin-circle-list' next='admin-circle-list'

6
src/views/admin/page-admin-circles.pug
View File

@ -33,7 +33,7 @@
div.admin-header__title Canaux div.admin-header__title Canaux
sib-link( sib-link(
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
next='admin-circle-create' next='admin-circle-create'
) Créer un canal ) Créer un canal
@ -47,7 +47,7 @@
sib-widget(name='hubl-admin-circle-leave-button') sib-widget(name='hubl-admin-circle-leave-button')
template template
sib-delete( sib-delete(
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter' data-label='Quitter'
) )
@ -70,7 +70,7 @@
sib-widget(name='hubl-admin-circle-join-button') sib-widget(name='hubl-admin-circle-join-button')
template template
sib-form.button.text-bold.text-uppercase.reversed.button-blue.bordered.with-icon.icon-arrow-right-circle.flex( sib-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
data-src='${value}' data-src='${value}'
fields='user.username' fields='user.username'

4
src/views/admin/page-admin-projects.pug
View File

@ -17,7 +17,7 @@
div.admin-header div.admin-header
div.admin-header__title Projets div.admin-header__title Projets
sib-link( sib-link(
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
next='admin-project-create' next='admin-project-create'
) Créer un projet ) Créer un projet
@ -31,7 +31,7 @@
sib-widget(name="hubl-admin-project-leave-button") sib-widget(name="hubl-admin-project-leave-button")
template template
sib-delete( sib-delete(
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter' data-label='Quitter'
) )

4
src/views/admin/page-admin-users.pug
View File

@ -11,7 +11,7 @@
template template
sib-ac-checker(data-src="${src}", permission='acl:Write') sib-ac-checker(data-src="${src}", permission='acl:Write')
sib-link( sib-link(
class='button rounded reversed button-blue bordered icon-pencil' class='button rounded reversed button-primary bordered icon-pencil'
data-src="${src}" data-src="${src}"
next="${value}" next="${value}"
) )
@ -30,7 +30,7 @@
div.admin-header__title Utilisateurs div.admin-header__title Utilisateurs
sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append') sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
sib-link( sib-link(
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
next='admin-users-create' next='admin-users-create'
) Ajouter un utilisateur ) Ajouter un utilisateur

4
src/views/circle/page-circle-edit.pug
View File

@ -29,7 +29,7 @@ div.content-box__info
data-src="${value['@id']}" data-src="${value['@id']}"
) )
sib-delete( sib-delete(
class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${value['@id']}" data-src="${value['@id']}"
data-label='Quitter le canal' data-label='Quitter le canal'
) )
@ -54,7 +54,7 @@ div.content-box__info
label-name='Nom du canal' label-name='Nom du canal'
label-owner='Administrateur ou administratrice' label-owner='Administrateur ou administratrice'
label-description='Sous-titre du canal' label-description='Sous-titre du canal *'
class-name='form-label is-light is-half-width' class-name='form-label is-light is-half-width'
class-owner='form-label is-light is-half-width member-select color' class-owner='form-label is-light is-half-width member-select color'

8
src/views/circle/page-circle-profile.pug
View File

@ -18,7 +18,7 @@ sib-router(default-route='circle-profile', hidden)
widget-creationDate='sib-display-date' widget-creationDate='sib-display-date'
) )
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources) Modifier et ajouter un membre
h2 Membres : h2 Membres :
@ -34,7 +34,7 @@ sib-router(default-route='circle-profile', hidden)
div.box-button div.box-button
sib-ac-checker(permission='acl:Delete', bind-resources) sib-ac-checker(permission='acl:Delete', bind-resources)
sib-delete( sib-delete(
class='button text-bold text-uppercase button-blue bordered with-icon icon-trash' class='button text-bold text-uppercase button-primary bordered with-icon icon-trash'
bind-resources bind-resources
data-label='Supprimer le canal' data-label='Supprimer le canal'
) )
@ -42,14 +42,14 @@ sib-router(default-route='circle-profile', hidden)
sib-widget(name='hubl-circle-leave-button') sib-widget(name='hubl-circle-leave-button')
template template
sib-delete( sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter le canal' data-label='Quitter le canal'
) )
sib-widget(name='hubl-circle-join-button') sib-widget(name='hubl-circle-join-button')
template template
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.flex button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
sib-form( sib-form(
data-src='' data-src=''
nested-field='members' nested-field='members'

4
src/views/project/page-project-profile.pug
View File

@ -22,7 +22,7 @@ sib-router(default-route='project-profile', hidden)
widget-creationDate='sib-display-date' widget-creationDate='sib-display-date'
) )
sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre sib-link(class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='project-edit' bind-resources) Modifier et ajouter un membre
.space-between .space-between
@ -68,7 +68,7 @@ sib-router(default-route='project-profile', hidden)
sib-widget(name='hubl-project-leave-button') sib-widget(name='hubl-project-leave-button')
template template
sib-delete( sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close' class='button btn-margin-left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
data-src="${src}" data-src="${src}"
data-label='Quitter le groupe' data-label='Quitter le groupe'
) )

23
styling.md Normal file
View File

@ -0,0 +1,23 @@
# Documentation
## Define your own colors
We use css variables to apply colors in the application.
The file can be found in src/styles/etc/
Example of use:
```css
:root {
--color-primary: #FFD759;
--color-secondary: #FFB700;
--color-complementary: #3C3F57;
--color-complementary-darken: #27293A;
}
```
Users can find example files at the root of the application. Use
- client.sample.happy-dev.css : for a more advanced example of customization.
- client.sample.css : to set five basic colors and let the default setup apply the colors.