Merge branch 'release/profile-directory' into feature/profile-rebased
This commit is contained in:
Jean-Baptiste Pasquier
commit
a823e8b909
9
.gitignore
vendored
9
.gitignore
vendored
@ -1,6 +1,11 @@
|
||||
**/node_modules
|
||||
**/config.json
|
||||
config.json
|
||||
.DS_Store
|
||||
*.iml
|
||||
*.swp
|
||||
dist
|
||||
.DS_Store
|
||||
cypress/screenshots
|
||||
cypress/videos
|
||||
cache
|
||||
.npm
|
||||
.DS_Store
|
||||
|
||||
@ -1,13 +1,56 @@
|
||||
image: node:11
|
||||
|
||||
# workflow
|
||||
stages:
|
||||
- build
|
||||
- test
|
||||
- integration
|
||||
- acceptance
|
||||
- release
|
||||
- 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 ##
|
||||
|
||||
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 ##
|
||||
|
||||
test1:
|
||||
|
||||
28
README.md
28
README.md
@ -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
|
||||
|
||||
* [Sib-Core](https://git.startinblox.com/framework/sib-core/) - An awesome new framework!
|
||||
|
||||
10
client.sample.css
Normal file
10
client.sample.css
Normal 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
176
client.sample.happy-dev.css
Normal 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);
|
||||
}
|
||||
@ -3,8 +3,8 @@
|
||||
"authority": "http://localhost:8000/",
|
||||
"authorityName": "djangoldp-server-name",
|
||||
"endpoints": {
|
||||
"groups": "http://localhost:8000/groups/",
|
||||
"skills": "http://localhost:8000/skills/",
|
||||
"users": "http://localhost:8000/users/",
|
||||
"groups": "http://localhost:8000/groups/"
|
||||
"users": "http://localhost:8000/users/"
|
||||
}
|
||||
}
|
||||
|
||||
7
cypress.json
Normal file
7
cypress.json
Normal 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
5
cypress/fixtures/example.json
Normal 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
108
cypress/integration/tests.spec.js
Normal 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
20
cypress/plugins/index.js
Normal 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
25
cypress/support/commands.js
Normal 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
30
cypress/support/index.js
Normal 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
18
docker/config.json
Normal 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
26
docker/djangoldp.docker
Normal 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
15
docker/docker-compose.override.yml
Normal 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
39
docker/docker-compose.yml
Normal 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
37
docker/front.docker
Normal 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
9
docker/nginx.conf
Normal 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
27
docker/packages.yml
Normal 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
1431
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
14
package.json
14
package.json
@ -17,7 +17,11 @@
|
||||
"watch": "run-p copy:* watch:* serve",
|
||||
"watch:css": "npm run build:css && npm run build:css -- -w",
|
||||
"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": {
|
||||
"branches": [
|
||||
@ -50,14 +54,18 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/cli": "^7.7.0",
|
||||
"@babel/core": "^7.7.0",
|
||||
"@babel/core": "^7.9.0",
|
||||
"copyfiles": "^2.1.1",
|
||||
"include-media": "^1.4.9",
|
||||
"node-sass": "^4.13.0",
|
||||
"node-sass": "^4.14.0",
|
||||
"normalize.css": "^8.0.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"pug": "^2.0.4",
|
||||
"pug-cli": "^1.0.0-alpha6",
|
||||
"pushstate-server": "^3.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"cypress": "^4.5.0",
|
||||
"cypress-terminal-report": "^1.2.1"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
background-color: $background;
|
||||
}
|
||||
|
||||
@ -1,32 +1,127 @@
|
||||
// Color Variables
|
||||
$color-43-100-50: hsl(43, 100%, 50%);
|
||||
$color-45-95-54: hsl(45, 95%, 54%);
|
||||
$color-46-100-67: hsl(46, 100%, 67%);
|
||||
$color-46-100-50: hsl(46, 100%, 50%);
|
||||
$color-0-0-100: hsl(0, 0%, 100%);
|
||||
$color-218-100-98: hsl(218, 100%, 98%);
|
||||
$color-210-17-91: hsl(210, 17%, 91%);
|
||||
$color-222-52-90: hsl(222, 52%, 90%);
|
||||
$color-210-25-95: hsl(210, 25%, 95%);
|
||||
$color-222-57-95: hsl(222, 57%, 95%);
|
||||
$color-213-20-91: hsl(213, 20%, 91%);
|
||||
$color-221-51-90: hsl(221, 51%, 90%);
|
||||
$color-228-25-79: hsl(228, 25%, 79%);
|
||||
$color-0-0-85: hsl(0, 0%, 85%);
|
||||
$color-229-25-79: hsl(229, 25%, 79%);
|
||||
$color-215-9-73: hsl(215, 9%, 73%);
|
||||
$color-244-10-70: hsl(244, 10%, 70%);
|
||||
$color-215-6-63: hsl(215, 6%, 63%);
|
||||
$color-210-5-56: hsl(210, 5%, 56%);
|
||||
$color-210-4-50: hsl(210, 4%, 50%);
|
||||
:root {
|
||||
--color-primary: #FF6765;
|
||||
--color-secondary: #46271B;
|
||||
--color-complementary: #5BB4CE;
|
||||
--color-complementary-darken: #35A0C0;
|
||||
|
||||
--color-white: hsl(0, 0%, 100%);
|
||||
|
||||
--color-black-h: 16;
|
||||
--color-black-s: 45%;
|
||||
--color-black-l: 6%;
|
||||
--color-black: hsl(var(--color-black-h), var(--color-black-s), var(--color-black-l)); /* 180D09 */
|
||||
|
||||
/* Fifty shades of greys */
|
||||
--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-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-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-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-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-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-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-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%);
|
||||
@ -8,7 +8,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-dark,
|
||||
.button-secondary,
|
||||
.bordered;
|
||||
margin-left: auto;
|
||||
margin-top: 3.2rem;
|
||||
@ -20,7 +20,7 @@
|
||||
&.with-form {
|
||||
|
||||
h1 {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-title);
|
||||
font-weight: bold;
|
||||
font-size: 2rem;
|
||||
|
||||
@ -30,8 +30,8 @@
|
||||
}
|
||||
|
||||
.fieldset {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
color: $color-233-18-29;
|
||||
border-bottom: 1px solid var(--color-fieldset-border);
|
||||
color: var(--color-title);
|
||||
display: flex;
|
||||
flex: 1 0 100%;
|
||||
font-size: 1.8rem;
|
||||
@ -45,7 +45,7 @@
|
||||
}
|
||||
|
||||
[name$='border-top'] {
|
||||
border-top: 1px solid $color-221-51-90;
|
||||
border-top: 1px solid var(--color-grey-10);
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
@ -72,11 +72,11 @@
|
||||
|
||||
input:not([type='file']),
|
||||
textarea {
|
||||
-webkit-tap-highlight-color: $color-244-73-62;
|
||||
background-color: $color-222-57-95;
|
||||
-webkit-tap-highlight-color: var(--color-grey-7);
|
||||
background-color: var(--color-input-background);
|
||||
box-sizing: border-box;
|
||||
border: 2px solid $color-222-57-95;
|
||||
color: $color-233-18-29;
|
||||
border: 2px solid var(--color-input-background);
|
||||
color: var(--color-input-text);
|
||||
/*flex: 1 1 0; Problem on Firefox for input type date*/
|
||||
line-height: 1;
|
||||
min-width: 0;
|
||||
@ -85,11 +85,11 @@
|
||||
|
||||
input:not([type="search"]):not([type="file"]),
|
||||
textarea {
|
||||
border: 2px solid $color-222-57-95;
|
||||
border: 2px solid var(--color-input-background);
|
||||
|
||||
&:focus,
|
||||
&:active {
|
||||
border-bottom: 2px solid $color-244-73-62;
|
||||
border-bottom: 2px solid var(--color-input-active);
|
||||
}
|
||||
}
|
||||
|
||||
@ -127,9 +127,10 @@
|
||||
|
||||
>.ss-single-selected {
|
||||
align-items: center;
|
||||
background-color: #ebeffa;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: var(--color-input-text);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
min-height: 4.2rem;
|
||||
@ -140,11 +141,15 @@
|
||||
margin: 0 18px 0 0;
|
||||
|
||||
span {
|
||||
border: solid $color-244-73-62;
|
||||
border: solid var(--color-input-icon);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-select-list);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -154,7 +159,7 @@
|
||||
.btn-margin-left,
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.button-blue,
|
||||
.button-complementary,
|
||||
.bordered;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
@ -172,7 +177,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-dark,
|
||||
.button-secondary,
|
||||
.bordered;
|
||||
margin-left: auto;
|
||||
margin-top: 3.2rem;
|
||||
@ -184,7 +189,7 @@
|
||||
font-weight: 600;
|
||||
|
||||
&.is-dark label {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-label-dark);
|
||||
margin-top: 3rem;
|
||||
|
||||
&>*:nth-child(2) {
|
||||
@ -193,7 +198,7 @@
|
||||
}
|
||||
|
||||
&.is-light label {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-label-light);
|
||||
margin-top: 1.8rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -230,9 +235,10 @@
|
||||
}
|
||||
|
||||
.ss-single-selected {
|
||||
background-color: $color-222-57-95;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
color: var(--color-input-text);
|
||||
display: flex;
|
||||
font-weight: normal;
|
||||
margin-top: 0.8rem;
|
||||
@ -240,13 +246,18 @@
|
||||
padding-left: 1rem;
|
||||
text-transform: none;
|
||||
|
||||
.ss-disabled {
|
||||
color: var(--color-grey-5);
|
||||
}
|
||||
|
||||
.ss-arrow span {
|
||||
border: solid $color-244-73-62;
|
||||
border: solid var(--color-input-icon);
|
||||
border-width: 0 2px 2px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ss-content .ss-list .ss-option {
|
||||
color: var(--color-input-text);
|
||||
font-weight: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
@ -258,7 +269,7 @@
|
||||
background-position: right 12px top 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 1.4rem;
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-input-icon);
|
||||
cursor: default;
|
||||
font-size: 1.4rem;
|
||||
margin-top: 1.6rem;
|
||||
@ -308,7 +319,7 @@
|
||||
input[type='file'] {
|
||||
box-sizing: border-box;
|
||||
flex: 0 0 20%;
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-input-text);
|
||||
cursor: pointer;
|
||||
padding-left: 3rem;
|
||||
}
|
||||
@ -342,7 +353,7 @@
|
||||
|
||||
.ss-multi-selected {
|
||||
align-items: center;
|
||||
background-color: $color-222-57-95;
|
||||
background-color: var(--color-input-background);
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
display: flex;
|
||||
@ -355,10 +366,10 @@
|
||||
margin: 0 18px 0 0;
|
||||
|
||||
span.ss-plus {
|
||||
background: $color-244-73-62;
|
||||
background: var(--color-input-icon);
|
||||
|
||||
&::after {
|
||||
background: $color-244-73-62;
|
||||
background: var(--color-input-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -377,7 +388,7 @@
|
||||
top: calc(-6rem + 7px);
|
||||
|
||||
&::before {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-5);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -392,6 +403,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ss-list {
|
||||
color: var(--color-input-text);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -414,9 +429,9 @@
|
||||
}
|
||||
|
||||
input[type='submit'] {
|
||||
background-color: transparent;
|
||||
border: 1px solid $color-244-73-62;
|
||||
color: $color-244-73-62;
|
||||
background-color: var(--color-select-add-button-background);
|
||||
border: 1px solid var(--color-select-add-button);
|
||||
color: var(--color-select-add-button);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
max-height: 83px;
|
||||
height: 83px;
|
||||
align-items: center;
|
||||
background-color: $color-0-0-100;
|
||||
color: $color-216-4-22;
|
||||
background-color: var(--color-header-background);
|
||||
color: var(--color-black);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
@ -22,14 +22,14 @@
|
||||
#search-input {
|
||||
border-radius: 10em;
|
||||
padding: 0.64rem 1.28rem;
|
||||
border: 1px solid $color-215-9-73;
|
||||
border: 1px solid var(--color-grey-10);
|
||||
height: 3.8rem;
|
||||
width: 28rem;
|
||||
-webkit-appearance: textfield;
|
||||
|
||||
& ~ #close-search-icon,
|
||||
& ~ #search-icon {
|
||||
color: $color-215-9-73;
|
||||
color: var(--color-grey-10);
|
||||
display: block;
|
||||
font-size: 1.7rem;
|
||||
margin: auto;
|
||||
@ -37,7 +37,7 @@
|
||||
right: 3.7rem;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
-webkit-text-stroke: 1px $color-215-9-73;
|
||||
-webkit-text-stroke: 1px var(--color-grey-10);
|
||||
}
|
||||
|
||||
& ~ #close-search-icon {
|
||||
@ -57,6 +57,7 @@
|
||||
}
|
||||
|
||||
sib-notifications {
|
||||
color: var(--color-bell);
|
||||
|
||||
@include breakpoint(sm) {
|
||||
padding: 0;
|
||||
@ -126,8 +127,8 @@
|
||||
display: block; /* To remove the disclosure triangle on Firefox v.>=69 */
|
||||
|
||||
&:focus {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-user-panel-header-background-open);
|
||||
color: var(--color-user-panel-header-text-open);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@ -143,7 +144,7 @@
|
||||
|
||||
hubl-user-avatar {
|
||||
align-items: center;
|
||||
background-color: $color-213-20-91;
|
||||
background-color: var(--color-avatar-background);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
height: 4.8rem;
|
||||
@ -198,7 +199,7 @@
|
||||
top: 83px;
|
||||
|
||||
> 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);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@ -213,20 +214,20 @@
|
||||
li {
|
||||
|
||||
sib-link {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-4);
|
||||
display: block;
|
||||
border-bottom: 1px solid $color-213-20-91;
|
||||
border-bottom: 1px solid var(--color-user-panel-list-border);
|
||||
margin-right: 0;
|
||||
padding: 1.6rem 1.3rem;
|
||||
&:hover {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-user-panel-list-text-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
color: $color-213-4-50;
|
||||
color: var(--color-grey-4);
|
||||
padding: 1.6rem 1.3rem;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
@ -235,8 +236,8 @@
|
||||
}
|
||||
|
||||
&[open] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-user-panel-header-background);
|
||||
color: var(--color-user-panel-header-text);
|
||||
|
||||
#user-controls__profile {
|
||||
|
||||
|
||||
@ -5,11 +5,11 @@
|
||||
:root {
|
||||
font-size: 10px;
|
||||
font-family: Open Sans, sans-serif;
|
||||
--sib-notifications-theme: #{$color-46-100-50};
|
||||
--sib-notifications-theme: var(--color-primary);
|
||||
|
||||
body {
|
||||
background-color: $color-210-25-95;
|
||||
color: $color-213-4-50;
|
||||
background-color: var(--color-main-background);
|
||||
color: var(--color-main-text);
|
||||
font-size: 1.6rem;
|
||||
min-height: 100vh;
|
||||
overflow-wrap: break-word;
|
||||
@ -43,16 +43,16 @@ nav, .views-container {
|
||||
/* Custom scrollbar of the left-menu */
|
||||
nav {
|
||||
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 {
|
||||
background: $color-233-18-29;
|
||||
background: var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-244-10-70;
|
||||
background-color: var(--color-scrollbar-left-track);
|
||||
border-radius: 6px;
|
||||
border: 3px solid $color-233-18-29;
|
||||
border: 3px solid var(--color-scrollbar-left-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -63,16 +63,16 @@ nav {
|
||||
/* Custom scrollbar of the content */
|
||||
.views-container {
|
||||
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 {
|
||||
background: white;
|
||||
background: var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: $color-244-10-70;
|
||||
background-color: var(--color-scrollbar-right-track);
|
||||
border-radius: 6px;
|
||||
border: 3px solid white;
|
||||
border: 3px solid var(--color-scrollbar-right-background);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
@ -118,7 +118,7 @@ h6 {
|
||||
}
|
||||
|
||||
h1, .h1-like {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-h1);
|
||||
font-size: 2rem;
|
||||
text-transform: uppercase;
|
||||
|
||||
@ -128,7 +128,7 @@ h1, .h1-like {
|
||||
}
|
||||
|
||||
h2, .h2-like {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-h2);
|
||||
font-size: 1.8rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@ -140,7 +140,7 @@ h2, .h2-like {
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-title);
|
||||
font-size: 1.7rem;
|
||||
}
|
||||
|
||||
@ -168,7 +168,7 @@ h5 {
|
||||
margin: 2rem 1rem 5rem 2rem;
|
||||
|
||||
&.full-width {
|
||||
background: $color-0-0-100;
|
||||
background: var(--color-white);
|
||||
flex: 1;
|
||||
font-size: 1.6rem;
|
||||
margin: 0 auto;
|
||||
@ -182,11 +182,11 @@ h5 {
|
||||
|
||||
/* Header inside circle, project view */
|
||||
.content-box__header {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
border-bottom: 1px solid var(--color-content-header);
|
||||
padding: 3rem;
|
||||
|
||||
@include breakpoint(sm) {
|
||||
background: $color-221-51-90;
|
||||
background: var(--color-grey-10);
|
||||
}
|
||||
|
||||
sib-display {
|
||||
@ -198,7 +198,7 @@ h5 {
|
||||
.mobile-sidebar-button {
|
||||
@include breakpoint(sm) {
|
||||
float: right;
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold!important;
|
||||
|
||||
@ -220,7 +220,7 @@ h5 {
|
||||
font-size: 1.8rem;
|
||||
|
||||
&:not(:empty)::before {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-grey-4);
|
||||
content: ' - ';
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
@ -228,12 +228,12 @@ h5 {
|
||||
}
|
||||
|
||||
.description {
|
||||
color: $color-215-6-63;
|
||||
color: var(--color-grey-4);
|
||||
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-grey-4);
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
@ -246,7 +246,7 @@ h5 {
|
||||
}
|
||||
|
||||
.modal {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
margin: 75px;
|
||||
padding: 40px;
|
||||
max-height: 85vh;
|
||||
@ -263,14 +263,14 @@ h5 {
|
||||
top: 32px;
|
||||
|
||||
button {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.backlink {
|
||||
@include icon('arrow-left-circle');
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-backlink);
|
||||
font-size: 1.5rem;
|
||||
margin: 2rem 0 0 2rem;
|
||||
text-decoration: underline;
|
||||
@ -288,7 +288,7 @@ h5 {
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-grey-1);
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
@ -311,7 +311,7 @@ h5 {
|
||||
}
|
||||
|
||||
.section {
|
||||
border-bottom: 1px solid $color-221-51-90;
|
||||
border-bottom: 1px solid var(--color-grey-10);
|
||||
padding: 4.5rem;
|
||||
}
|
||||
|
||||
@ -407,61 +407,61 @@ a,
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&.button-yellow {
|
||||
background-color: white;
|
||||
&.button-primary{
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-43-100-50;
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-43-100-50;
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background-color: white;
|
||||
&.button-secondary {
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-244-73-62;
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
color: $color-233-18-29;
|
||||
background-color: white;
|
||||
&.button-complementary {
|
||||
color: var(--color-complementary);
|
||||
background-color: var(--color-white);
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-233-18-29;
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-233-18-29;
|
||||
color: white;
|
||||
background-color: var(--color-complementary);
|
||||
color: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@ -470,64 +470,69 @@ a,
|
||||
}
|
||||
|
||||
&.reversed {
|
||||
&.button-yellow {
|
||||
background-color: $color-43-100-50;
|
||||
&.button-primary {
|
||||
background-color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
color: $color-43-100-50;
|
||||
background-color: var(--color-white);
|
||||
color: var(--color-primary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-43-100-50;
|
||||
border: 1px solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-blue {
|
||||
background-color: $color-244-73-62;
|
||||
&.button-secondary {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-dark {
|
||||
background-color: $color-233-18-29;
|
||||
&.button-complementary {
|
||||
background-color: var(--color-complementary);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: white;
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: white;
|
||||
background-color: var(--color-white);
|
||||
|
||||
*,
|
||||
& {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
&.bordered {
|
||||
border: 1px solid $color-233-18-29;
|
||||
border: 1px solid var(--color-complementary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
#main__menu {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-menu-background);
|
||||
color: var(--color-menu-text);
|
||||
display: block;
|
||||
max-width: 250px;
|
||||
min-height: calc(100vh - 83px); /* 83px = nav height */
|
||||
@ -36,17 +36,14 @@
|
||||
padding: 1.2rem;
|
||||
|
||||
&[active] {
|
||||
background-color: $color-46-100-67;
|
||||
color: $color-233-18-29;
|
||||
background-color: var(--color-menu-highlight-primary);
|
||||
|
||||
.menu-icon:before {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-0-0-100;
|
||||
background-color: var(--color-menu-icon-background-active);
|
||||
}
|
||||
|
||||
.menu-notification > sib-display > div:first-child {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
background-color: var(--color-menu-badge-background);
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +78,6 @@
|
||||
|
||||
.menu-chevron {
|
||||
align-items: center;
|
||||
color: $color-244-10-70;
|
||||
display: flex;
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
@ -136,7 +132,7 @@
|
||||
sib-display>div {
|
||||
|
||||
.create {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-white);
|
||||
margin: 1rem 1rem 2.2rem 3.2rem;
|
||||
}
|
||||
|
||||
@ -147,7 +143,7 @@
|
||||
}
|
||||
|
||||
>div {
|
||||
color: $color-244-10-70;
|
||||
color: var(--color-grey-6);
|
||||
cursor: pointer;
|
||||
>hubl-menu-fix-url-circle>sib-display>div,
|
||||
>hubl-menu-fix-url-project>sib-display>div {
|
||||
@ -163,8 +159,8 @@
|
||||
&>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 {
|
||||
background-color: $color-46-100-67;
|
||||
color: $color-233-18-29;
|
||||
background-color: var(--color-menu-highlight-primary);
|
||||
color: var(--color-menu-text-active);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
@ -195,7 +191,7 @@
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding-bottom: 0;
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -204,7 +200,8 @@
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background-color: $color-213-13-86;
|
||||
background-color: var(--color-grey-11);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -22,19 +22,19 @@
|
||||
text-align: center;
|
||||
|
||||
&.grey-color {
|
||||
background: $color-228-25-79;
|
||||
color: white;
|
||||
background: var(--color-table-header-background);
|
||||
color: var(--color-table-header-text);
|
||||
}
|
||||
|
||||
>* {
|
||||
border-right: 1px solid white;
|
||||
//flex: 1;
|
||||
border-right: 1px solid var(--color-table-border);
|
||||
flex: 1;
|
||||
padding: 2.1rem 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
>*: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,
|
||||
hubl-team-template-edit[name='members'] {
|
||||
display: flex;
|
||||
border-left: 1px solid $color-228-25-79;
|
||||
border-left: 1px solid var(--color-table-border);
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid $color-228-25-79;
|
||||
border-right: 1px solid $color-228-25-79;
|
||||
border-bottom: 1px solid var(--color-table-border);
|
||||
border-right: 1px solid var(--color-table-border);
|
||||
}
|
||||
|
||||
.cell {
|
||||
@ -94,7 +94,7 @@
|
||||
.text-bold,
|
||||
.text-uppercase,
|
||||
.reversed,
|
||||
.button-blue,
|
||||
.button-secondary,
|
||||
.bordered,
|
||||
.btn-margin-left;
|
||||
}
|
||||
@ -102,7 +102,7 @@
|
||||
}
|
||||
|
||||
.cell-with-name {
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-secondary);
|
||||
font-weight: 600;
|
||||
padding-top: 2.5rem;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
%user-thumb__picture {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
background-color: $color-213-20-91;
|
||||
background-color: var(--color-avatar-background);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
grid-column: 1 / span 1;
|
||||
@ -52,7 +52,7 @@
|
||||
}
|
||||
|
||||
%user-thumb__name {
|
||||
color: #7A7F85;
|
||||
color: var(--color-user-thumb-name);
|
||||
font-weight: 600;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
@ -88,7 +88,7 @@
|
||||
margin-right: 1.6rem;
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-icon);
|
||||
margin-right: 0.50rem;
|
||||
}
|
||||
}
|
||||
@ -99,7 +99,7 @@
|
||||
display: flex;
|
||||
|
||||
&::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-icon);
|
||||
font-size: 1.9rem;
|
||||
font-weight: bold;
|
||||
margin-left: 0;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#job-offers {
|
||||
/* #job-offers {
|
||||
|
||||
details {
|
||||
|
||||
@ -119,4 +119,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
%filters {
|
||||
/*%filters {
|
||||
display: grid;
|
||||
grid-gap: 0px 15px;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
@ -56,4 +56,4 @@
|
||||
sib-form[naked] {
|
||||
@extend %filters;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -27,13 +27,12 @@
|
||||
}
|
||||
|
||||
nav {
|
||||
background: $color-210-25-95;
|
||||
background: var(--color-right-menu-background);
|
||||
transition: all 0.5s;
|
||||
width: 25rem;
|
||||
|
||||
>sib-router {
|
||||
background-color: $color-222-52-90;
|
||||
color: $color-233-18-29;
|
||||
color: var(--color-right-menu-text);
|
||||
flex: 0 0 auto;
|
||||
font-weight: 600;
|
||||
|
||||
@ -47,7 +46,7 @@
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
border-bottom: 1px solid $color-229-25-79;
|
||||
border-bottom: 1px solid var(--color-right-menu-link-border);
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 2.15rem 2.55rem;
|
||||
@ -104,7 +103,7 @@
|
||||
}
|
||||
|
||||
&[name='admin-users']>li::before {
|
||||
background-color: $color-233-18-29;
|
||||
background-color: var(--color-secondary);
|
||||
content: '';
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
@ -124,14 +123,14 @@
|
||||
}
|
||||
|
||||
&[active] {
|
||||
background-color: $color-233-18-29;
|
||||
color: $color-46-100-67;
|
||||
background-color: var(--color-right-menu-active-background);
|
||||
color: var(--color-right-menu-active-text);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.active-color[active] {
|
||||
>li::before {
|
||||
background-color: #ffd857;
|
||||
background-color: var(--color-right-menu-active-icon);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -157,7 +156,7 @@
|
||||
|
||||
@include breakpoint(sm) {
|
||||
display: block;
|
||||
background: $color-221-51-90;
|
||||
background: var(--color-right-menu-background);
|
||||
bottom: 0;
|
||||
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
|
||||
min-width: 60%;
|
||||
@ -168,4 +167,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,10 +4,10 @@ sib-multiple[name*='skills'] {
|
||||
}
|
||||
|
||||
.skill {
|
||||
background-color: $color-43-100-50;
|
||||
border: 1px solid $color-43-100-50;
|
||||
background-color: var(--color-skill-background);
|
||||
border: 1px solid var(--color-skill-background);
|
||||
border-radius: 2em;
|
||||
color: $color-0-0-100;
|
||||
color: var(--color-skill-text);
|
||||
display: block;
|
||||
font-size: 1.4rem;
|
||||
font-weight: bold;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
%tag-role {
|
||||
border: 1px solid $color-45-95-54;
|
||||
border: 1px solid var(--color-tag-group-border);
|
||||
border-radius: 3px;
|
||||
color: $color-210-4-50;
|
||||
color: var(--color-tag-group-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-right: 0.6rem;
|
||||
@ -9,9 +9,9 @@
|
||||
}
|
||||
|
||||
%tag-admin {
|
||||
border: 1px solid $color-244-73-62;
|
||||
border: 1px solid var(--color-tag-admin-border);
|
||||
border-radius: 3px;
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-tag-admin-text);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
margin-left: 0.6rem;
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.job-offers__container {
|
||||
/*.job-offers__container {
|
||||
@extend %grid-layer;
|
||||
}
|
||||
|
||||
@ -202,5 +202,5 @@ sib-action[name='edit'] {
|
||||
@include icon('pencil');
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
#member-profile {
|
||||
/*#member-profile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
@ -149,4 +149,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
%member-info {
|
||||
/*%member-info {
|
||||
|
||||
sib-multiple[name^='user.'],
|
||||
>member-info>div,
|
||||
@ -239,4 +239,4 @@ member-info-groups {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
}
|
||||
|
||||
.button-question__color {
|
||||
color: $color-216-4-22;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.customer-box {
|
||||
@ -14,7 +14,7 @@
|
||||
margin: 1.6rem 0;
|
||||
|
||||
>* {
|
||||
border: 1px solid $color-221-51-90;
|
||||
border: 1px solid var(--color-grey-8);
|
||||
flex: 0 1 50%;
|
||||
padding: 1.7rem 2rem;
|
||||
|
||||
@ -94,7 +94,7 @@
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
span::before {
|
||||
color: $color-43-100-50;
|
||||
color: var(--color-primary);
|
||||
font-size: 2.2rem;
|
||||
margin: 0 1rem 0 0;
|
||||
}
|
||||
@ -103,7 +103,7 @@
|
||||
font-weight: bold;
|
||||
|
||||
&.link-color {
|
||||
color: $color-244-73-62;
|
||||
color: var(--color-complementary);
|
||||
}
|
||||
|
||||
&.norm-weight {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.user-profile__container {
|
||||
/*.user-profile__container {
|
||||
|
||||
.user-bio {
|
||||
display: grid;
|
||||
@ -42,10 +42,10 @@
|
||||
}
|
||||
|
||||
.info-form {
|
||||
grid-area: information;
|
||||
grid-area: information; */
|
||||
|
||||
/* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
|
||||
[name="account.picture"] {
|
||||
/*[name="account.picture"] {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@ -60,9 +60,9 @@
|
||||
p {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
/* Fin commentaire sur upload photos */
|
||||
}
|
||||
/*}
|
||||
|
||||
[name^="inline-"] {
|
||||
display: flex;
|
||||
@ -73,4 +73,4 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
@ -12,7 +12,7 @@ div.content-box__info
|
||||
class-description='form-label is-light is-full-width'
|
||||
|
||||
label-name='Nom du canal *'
|
||||
label-description='Sous-titre du canal'
|
||||
label-description='Sous-titre du canal *'
|
||||
|
||||
next='admin-circle-list'
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
div.admin-header__title Canaux
|
||||
|
||||
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'
|
||||
) Créer un canal
|
||||
|
||||
@ -47,7 +47,7 @@
|
||||
sib-widget(name='hubl-admin-circle-leave-button')
|
||||
template
|
||||
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-label='Quitter'
|
||||
)
|
||||
@ -70,7 +70,7 @@
|
||||
|
||||
sib-widget(name='hubl-admin-circle-join-button')
|
||||
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}'
|
||||
|
||||
fields='user.username'
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
div.admin-header
|
||||
div.admin-header__title Projets
|
||||
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'
|
||||
) Créer un projet
|
||||
|
||||
@ -31,7 +31,7 @@
|
||||
sib-widget(name="hubl-admin-project-leave-button")
|
||||
template
|
||||
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-label='Quitter'
|
||||
)
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
template
|
||||
sib-ac-checker(data-src="${src}", permission='acl:Write')
|
||||
sib-link(
|
||||
class='button rounded reversed button-blue bordered icon-pencil'
|
||||
class='button rounded reversed button-primary bordered icon-pencil'
|
||||
data-src="${src}"
|
||||
next="${value}"
|
||||
)
|
||||
@ -30,7 +30,7 @@
|
||||
div.admin-header__title Utilisateurs
|
||||
sib-ac-checker(data-src=`${endpoints.users || endpoints.post.users}`, permission='acl:Append')
|
||||
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'
|
||||
) Ajouter un utilisateur
|
||||
|
||||
|
||||
@ -29,7 +29,7 @@ div.content-box__info
|
||||
data-src="${value['@id']}"
|
||||
)
|
||||
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-label='Quitter le canal'
|
||||
)
|
||||
@ -54,7 +54,7 @@ div.content-box__info
|
||||
|
||||
label-name='Nom du canal'
|
||||
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-owner='form-label is-light is-half-width member-select color'
|
||||
|
||||
@ -18,7 +18,7 @@ sib-router(default-route='circle-profile', hidden)
|
||||
widget-creationDate='sib-display-date'
|
||||
)
|
||||
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 :
|
||||
@ -34,7 +34,7 @@ sib-router(default-route='circle-profile', hidden)
|
||||
div.box-button
|
||||
sib-ac-checker(permission='acl:Delete', bind-resources)
|
||||
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
|
||||
data-label='Supprimer le canal'
|
||||
)
|
||||
@ -42,14 +42,14 @@ sib-router(default-route='circle-profile', hidden)
|
||||
sib-widget(name='hubl-circle-leave-button')
|
||||
template
|
||||
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-label='Quitter le canal'
|
||||
)
|
||||
|
||||
sib-widget(name='hubl-circle-join-button')
|
||||
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(
|
||||
data-src=''
|
||||
nested-field='members'
|
||||
|
||||
@ -22,7 +22,7 @@ sib-router(default-route='project-profile', hidden)
|
||||
widget-creationDate='sib-display-date'
|
||||
)
|
||||
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
|
||||
@ -68,7 +68,7 @@ sib-router(default-route='project-profile', hidden)
|
||||
sib-widget(name='hubl-project-leave-button')
|
||||
template
|
||||
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-label='Quitter le groupe'
|
||||
)
|
||||
|
||||
23
styling.md
Normal file
23
styling.md
Normal 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.
|
||||
Loading…
Reference in New Issue
Block a user