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