diff --git a/package.json b/package.json
index 7048568..f319cac 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
"url": "https://git.startinblox.com/applications/hubl.git"
},
"scripts": {
+ "build:interactions": "cp src/interactions.html dist",
"build": "run-p copy:* build:*",
"build:css": "node-sass src/styles/index.scss -o dist/styles/",
"build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
@@ -18,6 +19,7 @@
"copy:image": "copyfiles -f src/images/* dist/images",
"copy:sw": "copyfiles -f src/sw.js dist",
"serve": "pushstate-server -d ./dist -p 3000",
+ "watch:interactions": "npm-watch build:interactions",
"watch": "run-p build watch:* serve",
"watch:css": "npm-watch build:css",
"watch:js": "npm-watch build:js",
@@ -34,6 +36,7 @@
"test": "cypress run"
},
"watch": {
+ "build:interactions": "src/interactions.html",
"build:css": "src/styles/**/*",
"build:manifest": "make-webmanifest.mjs",
"build:i18n": "src/locales/**/*",
diff --git a/src/dependencies.pug b/src/dependencies.pug
index d6cec94..739cf54 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -14,7 +14,7 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
//- script(type="module" src="/lib/sib-router/src/index.js" defer)
-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
+//-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
//- script(type="module" src="/lib/sib-notifications/index.js" defer)
//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
@@ -27,19 +27,19 @@ script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notific
//- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.0" defer)
//- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
+//-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer)
//- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
+//-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer)
//- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
+//-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer)
//- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
-if endpoints.users || (endpoints.get && endpoints.get.users)
+//-if endpoints.users || (endpoints.get && endpoints.get.users)
script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer)
//- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
diff --git a/src/header.pug b/src/header.pug
index 43f8eb6..80e0555 100644
--- a/src/header.pug
+++ b/src/header.pug
@@ -1,11 +1,11 @@
-.segment.lg-three-quarter.float-left.align-middle
+//-.segment.lg-three-quarter.float-left.align-middle
.logo
solid-link(next='dashboard')
img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
span.tag.beta.reversed.color-primary(data-trans='header.beta')
-.segment.lg-auto.float-right
+//-.segment.lg-auto.float-right
.segment.lg-auto.float-left.margin-right.align-middle
solid-notifications.notLoggedIn(
nested-field="inbox"
diff --git a/src/index.pug b/src/index.pug
index dfe7aa3..f90b2ff 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -22,10 +22,12 @@ html(lang="en")
header#header.segment.bg-color-white.shadow
include header.pug
- nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
+ //-nav#main__menu.segment.float-left.bg-color-heading.text-small.text-color-white.left-menu.jsLeftMenu
include menu-left.pug
+ nav.segment.lg-quarter.bg-color-heading
- main#viewport.segment.float-left.notLoggedIn
+ main.segment.lg-three-quarter.bg-color-third
+ //-main#viewport.segment.float-left.notLoggedIn
if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
#dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
diff --git a/src/interactions.html b/src/interactions.html
new file mode 100644
index 0000000..5806e34
--- /dev/null
+++ b/src/interactions.html
@@ -0,0 +1,168 @@
+
+
+
+ Interaction
+ Avatars
+
+
+
+
+
+
+
+
+
+
+
+ Badges
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+
+ Buttons + shadows + Text uppercase + text bold
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Quitter le projet
+ Borders
+
+
+
+
+
+
+ Colors
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.
+
+ Text sizes + weights + position + letters spacings
+ text xsmall and centered
+ Text small with larger letter spacing
+ Text medium, semibold, right-aligned
+ Text large and bold
+ Text xlarge with underline
+ Text xxlarge with large letter spacing
+
+ Forms
+
+
+
+
+ Icons
+ Lorem
+ Segments
+
+
+
+ Tables
+
+ Tags
+ Lorem
+ Links
+
+ Back
+
+
+ Highlight
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis commodo justo ac eleifend. Aliquam porta molestie augue, fringilla scelerisque felis fermentum non. Donec maximus eros fringilla enim blandit eleifend. Praesent nisl nulla, iaculis a mauris vitae, pharetra ullamcorper arcu.
+ User thumb
+
+
+
+
+
+ Gaëlle Morin
+ @gaelle
+
+
+
+
+
+
+ Sylvain
+ Le Bon
+
+
+
+
+
+
diff --git a/src/styles/hubl-app/_index.scss b/src/styles/hubl-app/_index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/hubl-framework/README.md b/src/styles/hubl-framework/README.md
new file mode 100644
index 0000000..7f98fa3
--- /dev/null
+++ b/src/styles/hubl-framework/README.md
@@ -0,0 +1,15 @@
+# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
+
+Les avatars
+Utiliser la class `.avatar` sur un élément HTML englobant une image.
+L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
+Les avatars peuvent avoir différentes tailles.
+
+Les badges
+Utiliser la class `.badge` sur un élément HTML.
+L'élément sera arrondi. Par défaut, le texte sera bleu foncé et sa taille fera 11px, l'intérieur du cercle sera vert avec une taille de 18px;
+Le texte et le cercle peuvent avoir différente couleurs.
+
+Les boutons
+Utiliser la class `.button` sur un élément HTML.
+Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.
diff --git a/src/styles/hubl-framework/_index.scss b/src/styles/hubl-framework/_index.scss
new file mode 100644
index 0000000..ce59c71
--- /dev/null
+++ b/src/styles/hubl-framework/_index.scss
@@ -0,0 +1,18 @@
+@charset "UTF-8";
+
+@import '../../../node_modules/include-media/dist/include-media';
+@import '../../../node_modules/normalize.css/normalize';
+
+.block {
+ display: block;
+}
+@import 'commons/_index';
+@import 'avatars/_index';
+@import 'badges/_index';
+@import 'buttons/_index';
+@import 'links/_index';
+@import 'forms/_index';
+@import 'icons/_index';
+@import 'segments/_index';
+@import 'tables/_index';
+@import 'tags/_index';
diff --git a/src/styles/hubl-framework/avatars/_index.scss b/src/styles/hubl-framework/avatars/_index.scss
new file mode 100644
index 0000000..2eae1dc
--- /dev/null
+++ b/src/styles/hubl-framework/avatars/_index.scss
@@ -0,0 +1,46 @@
+.avatar {
+ background: #E4E8ED;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ overflow: hidden;
+ position: relative;
+ height: 50px;
+ width: 50px;
+
+ >img,
+ object {
+ object-fit: cover;
+ object-position: center;
+ }
+ >img {
+ max-height: 100%;
+ max-width: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ >object {
+ max-height: 40%;
+ max-width: 40%;
+ }
+
+ &.xsmall {
+ height: 31px;
+ width: 31px;
+ }
+ &.small {
+ height: 44px;
+ width: 44px;
+ }
+ &.large {
+ height: 180px;
+ width: 180px;
+ }
+ &.xlarge {
+ height: 241px;
+ width: 241px;
+ }
+}
diff --git a/src/styles/hubl-framework/badges/_index.scss b/src/styles/hubl-framework/badges/_index.scss
new file mode 100644
index 0000000..1ae3c5e
--- /dev/null
+++ b/src/styles/hubl-framework/badges/_index.scss
@@ -0,0 +1,50 @@
+.badge {
+ display: block;
+ border-radius: 50%;
+ font-size: 11px;
+ height: 18px;
+ width: 18px;
+ font-weight: bold;
+ text-align: center;
+ line-height: 18px;
+ color: var(--color-heading);
+ background: var(--color-third);
+
+ &.color-primary {
+ background: white;
+ border: 1px solid var(--color-primary);
+ color: var(--color-primary);
+ }
+
+ &.color-secondary {
+ background: white;
+ border: 1px solid var(--color-secondary);
+ color: var(--color-secondary);
+ }
+
+ &.color-third {
+ background: white;
+ border: 1px solid var(--color-third);
+ color: var(--color-third);
+ }
+
+ &.reversed {
+ &.color-primary {
+ background: var(--color-primary);
+ border: 1px solid var(--color-primary);
+ color: white;
+ }
+
+ &.color-secondary {
+ background: var(--color-secondary);
+ border: 1px solid var(--color-secondary);
+ color: white;
+ }
+
+ &.color-third {
+ background: var(--color-third);
+ border: 1px solid var(--color-third);
+ color: white;
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/buttons/_index.scss b/src/styles/hubl-framework/buttons/_index.scss
new file mode 100644
index 0000000..9487109
--- /dev/null
+++ b/src/styles/hubl-framework/buttons/_index.scss
@@ -0,0 +1,188 @@
+button,
+.button,
+input[type='submit'],
+a {
+ background: none;
+ border: none;
+ cursor: pointer;
+ display: inline-block;
+ padding: 0;
+
+ &.button {
+ padding: 8px 20px;
+ border-radius: 16.5px;
+ height: 33px;
+
+ &.rounded {
+ border-radius: 50%;
+ font-size: 18px;
+ padding: 2px;
+ height: 29px;
+ width: 29px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+ &.icon::before {
+ font-size: 15px;
+ margin-right: 10px;
+ }
+ &.color-primary {
+ background-color: white;
+ *,
+ & {
+ color: var(--color-primary);
+ }
+ &.bordered {
+ border: 1px solid var(--color-primary);
+ }
+ &:hover {
+ background-color: var(--color-primary);
+
+ *,
+ & {
+ color: white;
+ }
+ }
+ }
+ &.color-secondary {
+ background-color: white;
+
+ *,
+ & {
+ color: var(--color-secondary);
+ }
+ &.bordered {
+ border: 1px solid var(--color-secondary);
+ }
+ &:hover {
+ background-color: var(--color-secondary);
+ color: white;
+
+ *,
+ & {
+ color: white;
+ }
+ }
+ }
+ &.color-third {
+ color: var(--color-third);
+ background-color:white;
+
+ *,
+ & {
+ color: var(--color-third);
+ }
+ &.bordered {
+ border: 1px solid var(--color-third);
+ }
+ &:hover {
+ background-color: var(--color-third);
+
+ *,
+ & {
+ color: white;
+ }
+ }
+ }
+ &.color-disabled {
+ cursor: not-allowed;
+ background-color: white;
+
+ *,
+ & {
+ color: #636363;
+ }
+ &.bordered {
+ border: 1px solid #636363;
+ }
+ &:hover {
+ background-color: white;
+
+ *,
+ & {
+ color: #636363;
+ }
+ }
+ }
+ &.reversed {
+ &.color-primary {
+ background-color: var(--color-primary);
+
+ *,
+ & {
+ color: white;
+ }
+ &:hover {
+ background-color: white;
+
+ *,
+ & {
+ color: var(--color-primary);
+ }
+ &.bordered {
+ border: 1px solid var(--color-primary);
+ }
+ }
+ }
+ &.color-secondary {
+ background-color: var(--color-secondary);
+
+ *,
+ & {
+ color: white;
+ }
+ &:hover {
+ background-color: white;
+
+ *,
+ & {
+ color: var(--color-secondary);
+ }
+ &.bordered {
+ border: 1px solid var(--color-secondary);
+ }
+ }
+ }
+ &.color-third {
+ background-color: var(--color-third);
+
+ *,
+ & {
+ color: white;
+ }
+ &:hover {
+ background-color: white;
+
+ *,
+ & {
+ color: var(--color-third);
+ }
+ &.bordered {
+ border: 1px solid var(--color-third);
+ }
+ }
+ }
+ &.color-disabled {
+ cursor: not-allowed;
+ background-color: #636363;
+
+ *,
+ & {
+ color: white;
+ }
+ &.bordered {
+ border: 1px solid white;
+ }
+ &:hover {
+ background-color: #636363;
+
+ *,
+ & {
+ color: white;
+ }
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/commons/borders.scss b/src/styles/hubl-framework/commons/borders.scss
index 9e7f346..224d5f2 100644
--- a/src/styles/hubl-framework/commons/borders.scss
+++ b/src/styles/hubl-framework/commons/borders.scss
@@ -1,9 +1,24 @@
.border {
-
+
+ &.all-sides {
+ border: 1px solid;
+ }
+ &.top {
+ border-top: 1px solid;
+ }
+ &.right {
+ border-right: 1px solid;
+ }
+ &.bottom {
+ border-bottom: 1px solid;
+ }
+ &.left {
+ border-left: 1px solid;
+ }
&-thick {
border-width: thick;
}
- &-color {
+ &.color {
&-primary {
border-color: var(--color-primary);
}
@@ -16,69 +31,8 @@
&-heading {
border-color: var(--color-heading);
}
- }
- &-top {
- border-top: 1px solid;
-
- &-color-primary {
- border-color: var(--color-primary);
- }
- &-color-secondary {
- border-color: var(--color-secondary);
- }
- &-color-third {
- border-color: var(--color-third);
- }
- &-color-heading {
- border-color: var(--color-heading);
- }
- }
- &-right {
- border-right: 1px solid;
-
- &-color-primary {
- border-color: var(--color-primary);
- }
- &-color-secondary {
- border-color: var(--color-secondary);
- }
- &-color-third {
- border-color: var(--color-third);
- }
- &-color-heading {
- border-color: var(--color-heading);
- }
- }
- &-bottom {
- border-bottom: 1px solid;
-
- &-color-primary {
- border-color: var(--color-primary);
- }
- &-color-secondary {
- border-color: var(--color-secondary);
- }
- &-color-third {
- border-color: var(--color-third);
- }
- &-color-heading {
- border-color: var(--color-heading);
- }
- }
- &-left {
- border-left: 1px solid;
-
- &-color-primary {
- border-color: var(--color-primary);
- }
- &-color-secondary {
- border-color: var(--color-secondary);
- }
- &-color-third {
- border-color: var(--color-third);
- }
- &-color-heading {
- border-color: var(--color-heading);
+ &-grey {
+ border-color: #D6CECE;
}
}
}
diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss
index 459a3d6..a246438 100644
--- a/src/styles/hubl-framework/commons/colors.scss
+++ b/src/styles/hubl-framework/commons/colors.scss
@@ -5,14 +5,18 @@
--color-heading: #2E3F58;
}
+.highlight::selection {
+ background-color: var(--color-third);
+}
+
.bg-color-primary {
background-color: var(--color-primary);
- &.active[active] {
+ &.active:active {
background-color: var(--color-secondary);
}
- &.hover:hover {
- opacity: 0.3;
+ &.hover:hover:not(:active) {
+ background-color: #202B3C;
}
&.reverse {
background-color: var(--color-secondary);
@@ -22,11 +26,11 @@
.bg-color-secondary {
background-color: var(--color-secondary);
- &.active[active] {
+ &.active:active {
background-color: var(--color-primary);
}
- &.hover:hover {
- opacity: 0.3;
+ &.hover:hover:not(:active) {
+ background-color: #202B3C;
}
&.reverse {
background-color: var(--color-primary);
@@ -36,11 +40,11 @@
.bg-color-third {
background-color: var(--color-third);
- &.active[active] {
+ &.active:active {
background-color: var(--color-heading);
}
- &.hover:hover {
- opacity: 0.3;
+ &.hover:hover:not(:active) {
+ background-color: #202B3C;
}
&.reverse {
background-color: var(--color-heading);
@@ -50,26 +54,38 @@
.bg-color-heading {
background-color: var(--color-heading);
- &.active[active] {
+ &.active:active {
background-color: var(--color-third);
}
- &.hover:hover {
- opacity: 0.3;
+ &.hover:hover:not(:active) {
+ background-color: #202B3C;
}
&.reverse {
background-color: var(--color-third);
}
}
+.bg-color-grey {
+ background-color: #F1F1F1;
+
+ &.active:active {
+ background-color: var(--color-heading);
+ }
+ &.hover:hover:not(:active) {
+ background-color: #E4E4E4;
+ }
+}
+
+.bg-color-white {
+ background: white;
+}
+
.text-color-primary {
color: var(--color-primary);
- &.active[active] {
+ &.active:active {
color: var(--color-secondary);
}
- &.hover:hover {
- opacity: 0.3;
- }
&.reverse {
color: var(--color-secondary);
}
@@ -78,14 +94,9 @@
.text-color-secondary {
color: var(--color-secondary);
- &.active[active] {
+ &.active:active {
color: var(--color-primary);
}
-
- &.hover:hover {
- opacity: 0.3;
- }
-
&.reverse {
color: var(--color-primary);
}
@@ -94,12 +105,9 @@
.text-color-third {
color: var(--color-third);
- &.active[active] {
+ &.active:active {
color: var(--color-heading);
}
- &.hover:hover {
- opacity: 0.3;
- }
&.reverse {
color: var(--color-heading);
}
@@ -108,13 +116,18 @@
.text-color-heading {
color: var(--color-heading);
- &.active[active] {
- color: var(--color-third);
- }
- &.hover:hover {
- opacity: 0.3;
+ &.active:active {
+ color: white;
}
&.reverse {
color: var(--color-third);
}
}
+
+.text-color-white {
+ color: white;
+}
+
+.text-hover:hover {
+ color: var(--color-secondary);
+}
diff --git a/src/styles/hubl-framework/commons/texts.scss b/src/styles/hubl-framework/commons/texts.scss
index cf0636a..1b2e856 100644
--- a/src/styles/hubl-framework/commons/texts.scss
+++ b/src/styles/hubl-framework/commons/texts.scss
@@ -6,7 +6,7 @@
&-small {
font-size: 13px;
}
- &-normal {
+ &-medium {
font-size: 14px;
}
&-large {
diff --git a/src/styles/hubl-framework/forms/_index.scss b/src/styles/hubl-framework/forms/_index.scss
new file mode 100644
index 0000000..201ef8f
--- /dev/null
+++ b/src/styles/hubl-framework/forms/_index.scss
@@ -0,0 +1,10 @@
+solid-form {
+
+ [data-id="error"] {
+ display: none !important; // Hide the default core message, english only with a weird message
+ }
+
+ @import 'inputs';
+ @import 'buttons';
+ @import 'widgets';
+}
diff --git a/src/styles/hubl-framework/forms/buttons.scss b/src/styles/hubl-framework/forms/buttons.scss
new file mode 100644
index 0000000..211818e
--- /dev/null
+++ b/src/styles/hubl-framework/forms/buttons.scss
@@ -0,0 +1,27 @@
+.button-register>form>input[type='submit'] {
+ /*@extend .button,
+ .text-bolder,
+ .text-uppercase,
+ .reversed,
+ .button-secondary,
+ .bordered;*/
+ height: auto;
+ position: fixed;
+ bottom: 1em;
+ left: 10%;
+ white-space: normal;
+ width: 80%;
+ z-index: 1;
+
+ /*@include breakpoint(lg) {
+ height: 3rem;
+ position: unset;
+ bottom: unset;
+ white-space: unset;
+ left: unset;
+ width: unset;
+ z-index: unset;
+ float: right;
+ margin-top: 10px;
+ }*/
+}
diff --git a/src/styles/hubl-framework/forms/inputs.scss b/src/styles/hubl-framework/forms/inputs.scss
new file mode 100644
index 0000000..160eef9
--- /dev/null
+++ b/src/styles/hubl-framework/forms/inputs.scss
@@ -0,0 +1,34 @@
+input[type='text'],
+textarea {
+ border: none;
+ outline: none;
+ color: #636363;
+ padding: 12px 14px;
+ margin-top: 6px;
+ line-height: 1;
+ width: 100%;
+ box-sizing: border-box;
+ -webkit-tap-highlight-color: var(--color-secondary);
+
+ &:required:invalid {
+ border-color: 1px solid var(--color-primary);
+ }
+}
+
+.input-bg-grey input {
+ background: #F6F6F6;
+}
+
+.input-bg-white input {
+ background: white;
+}
+
+textarea {
+ height: 110px;
+ resize: vertical;
+}
+
+input.icon {
+ background-position: right 12px top 50%;
+ background-repeat: no-repeat;
+}
diff --git a/src/styles/hubl-framework/forms/widgets.scss b/src/styles/hubl-framework/forms/widgets.scss
new file mode 100644
index 0000000..0ad0382
--- /dev/null
+++ b/src/styles/hubl-framework/forms/widgets.scss
@@ -0,0 +1,82 @@
+solid-form-text-label>input[type='text'] + label {
+ display: block;
+}
+
+solid-form-dropdown-autocompletion,
+solid-form-dropdown-autocompletion-label,
+solid-form-multipleselect-autocompletion-label,
+hubl-status {
+
+ .ss-main {
+ font-weight: normal;
+ margin-top: 6px;
+ text-transform: none;
+
+ .ss-single-selected {
+ background-color: #F6F6F6;
+ border: none;
+ border-radius: 0px;
+ color: var(--color-grey);
+ font-weight: normal;
+ min-height: 46px;
+ padding: 12px 14px;
+
+ .ss-disabled {
+ color: #7A7F85;
+ }
+
+ .ss-arrow {
+ font-size: 15px;
+ margin: 0 12px 0 0;
+
+ span {
+ border: solid var(--color-grey);
+ border-width: 0 2px 2px 0;
+ }
+ }
+ }
+ }
+
+ .ss-list {
+ color: var(--color-grey);
+ font-weight: normal;
+ text-transform: none;
+ }
+}
+
+solid-form-date {
+ input[type="date"] {
+ background-image: url("/images/calendar.svg");
+ background-position: right 12px top 50%;
+ background-repeat: no-repeat;
+ background-size: 1.4rem;
+ color: var(--color-input-icon);
+ cursor: default;
+ font-size: 1.4rem;
+ margin-top: 1.6rem;
+ max-width: 50vw;
+ padding-right: 3rem;
+ /* Needed to replace the close icon in FF when you are selecting a date */
+ padding-top: 1.2rem;
+ /* Needed to center the close icon in FF when you are selecting a date */
+ position: relative;
+
+ &::-webkit-calendar-picker-indicator {
+ cursor: pointer;
+ opacity: 0;
+ position: absolute;
+ right: 8px;
+ }
+
+ &::-webkit-clear-button {
+ cursor: pointer;
+ margin-bottom: 5px;
+ /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */
+ margin-right: 5px;
+ }
+
+ &::-webkit-inner-spin-button {
+ display: none;
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/icons/_index.scss b/src/styles/hubl-framework/icons/_index.scss
new file mode 100644
index 0000000..9bba0a9
--- /dev/null
+++ b/src/styles/hubl-framework/icons/_index.scss
@@ -0,0 +1,4 @@
+@import 'styles';
+@import 'sizes';
+@import 'positions';
+@import 'colors';
diff --git a/src/styles/hubl-framework/icons/colors.scss b/src/styles/hubl-framework/icons/colors.scss
new file mode 100644
index 0000000..fd0140c
--- /dev/null
+++ b/src/styles/hubl-framework/icons/colors.scss
@@ -0,0 +1,42 @@
+.icon {
+
+ &-primary{
+
+ &::before {
+ color: var(--color-primary);
+ }
+ &.hover:hover::before {
+ color: var(--color-secondary);
+ }
+ }
+ &-secondary{
+
+ &::before {
+ color: var(--color-secondary);
+ }
+ &.hover:hover::before {
+ color: var(--color-primary);
+ }
+ }
+ &-third{
+
+ &::before {
+ color: var(--color-third);
+ }
+ &.hover:hover::before {
+ color: var(--color-heading);
+ }
+ }
+ &-heading{
+
+ &::before {
+ color: var(--color-heading);
+ }
+ &.hover:hover::before {
+ color: var(--color-third);
+ }
+ }
+ &-grey::before {
+ color: #636363;
+ }
+}
diff --git a/src/styles/hubl-framework/icons/positions.scss b/src/styles/hubl-framework/icons/positions.scss
new file mode 100644
index 0000000..17160ed
--- /dev/null
+++ b/src/styles/hubl-framework/icons/positions.scss
@@ -0,0 +1,14 @@
+.icon {
+
+ &.centered {
+ margin: 0 auto;
+ }
+
+ &.margin-right-small::before {
+ margin-right: 15px;
+ }
+
+ &.margin-right-xxsmall::before {
+ margin-right: 5px;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/icons/sizes.scss b/src/styles/hubl-framework/icons/sizes.scss
new file mode 100644
index 0000000..fdff513
--- /dev/null
+++ b/src/styles/hubl-framework/icons/sizes.scss
@@ -0,0 +1,18 @@
+.icon {
+
+ &::before {
+ font-size: 18px;
+ }
+ &-xsmall::before {
+ font-size: 12px;
+ }
+ &-small::before {
+ font-size: 15px;
+ }
+ &-large::before {
+ font-size: 20px;
+ }
+ &-xlarge::before {
+ font-size: 30px;
+ }
+}
diff --git a/src/styles/hubl-framework/icons/styles.scss b/src/styles/hubl-framework/icons/styles.scss
new file mode 100644
index 0000000..fa1352c
--- /dev/null
+++ b/src/styles/hubl-framework/icons/styles.scss
@@ -0,0 +1,37 @@
+.icon {
+
+ &.icon-magnify {
+ background-image: url("/lib/solid-directory/dist/assets/magnify.svg");
+ }
+ &.icon-arrow-down {
+ background-image: url();
+ }
+ &.rounded {
+ border: 2px solid;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ &-small {
+ height: 35px;
+ width: 35px;
+ }
+ &-large {
+ height: 70px;
+ width: 70px;
+ }
+ &-primary {
+ border-color: var(--color-primary);
+ }
+ &-secondary {
+ border-color: var(--color-secondary);
+ }
+ &-third {
+ border-color: var(--color-third);
+ }
+ &-heading {
+ border-color: var(--color-heading);
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/links/_index.scss b/src/styles/hubl-framework/links/_index.scss
new file mode 100644
index 0000000..7850c39
--- /dev/null
+++ b/src/styles/hubl-framework/links/_index.scss
@@ -0,0 +1,19 @@
+.backlink {
+ color: #636363;
+ text-decoration: underline;
+
+ &::before {
+ display: inline-block;
+ font-size: 20px;
+ margin-right: 10px;
+ text-decoration: none;
+ }
+
+ &:hover {
+ text-decoration: none;
+ }
+}
+
+.link {
+ color: var(--color-secondary);
+}
diff --git a/src/styles/hubl-framework/segments/_index.scss b/src/styles/hubl-framework/segments/_index.scss
new file mode 100644
index 0000000..a001083
--- /dev/null
+++ b/src/styles/hubl-framework/segments/_index.scss
@@ -0,0 +1,3 @@
+@import 'positions';
+@import 'spaces';
+@import 'sizes';
diff --git a/src/styles/hubl-framework/segments/positions.scss b/src/styles/hubl-framework/segments/positions.scss
new file mode 100644
index 0000000..385f290
--- /dev/null
+++ b/src/styles/hubl-framework/segments/positions.scss
@@ -0,0 +1,13 @@
+.segment {
+ position: relative;
+
+ .align-middle {
+ transform: translateY(50%);
+ }
+ &.float-left {
+ float: left;
+ }
+ &.float-right {
+ float: right;
+ }
+}
diff --git a/src/styles/hubl-framework/segments/sizes.scss b/src/styles/hubl-framework/segments/sizes.scss
new file mode 100644
index 0000000..a1d7108
--- /dev/null
+++ b/src/styles/hubl-framework/segments/sizes.scss
@@ -0,0 +1,29 @@
+.segment {
+
+ &.lg {
+ &-hidden {
+ display: none;
+ }
+ &-quarter {
+ width: 25%;
+ }
+ &-third {
+ width: 33.333%;
+ }
+ &-half {
+ width: 50%;
+ }
+ &-two-third {
+ width: 66.666%;
+ }
+ &-three-quarter {
+ width: 75%;
+ }
+ &-full {
+ width: 100%;
+ }
+ &-auto {
+ width: auto;
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/segments/spaces.scss b/src/styles/hubl-framework/segments/spaces.scss
new file mode 100644
index 0000000..16cfc21
--- /dev/null
+++ b/src/styles/hubl-framework/segments/spaces.scss
@@ -0,0 +1,244 @@
+.segment {
+ box-sizing: border-box;
+
+ &.clearfix::after {
+ content: "";
+ clear: both;
+ display: block;
+ height: 0;
+ width: 100%;
+ }
+
+ &.margin {
+ &-xxsmall {
+ margin: 5px;
+ }
+ &-xsmall {
+ margin: 10px;
+ }
+ &-small {
+ margin: 15px;
+ }
+ &-medium {
+ margin: 20px;
+ }
+ &-large {
+ margin: 25px;
+ }
+ &-xlarge {
+ margin: 30px;
+ }
+ &-xxlarge {
+ margin: 35px;
+ }
+ &-top {
+ &-xxsmall {
+ margin-top: 5px;
+ }
+ &-xsmall {
+ margin-top: 10px;
+ }
+ &-small {
+ margin-top: 15px;
+ }
+ &-medium {
+ margin-top: 20px;
+ }
+ &-large {
+ margin-top: 25px;
+ }
+ &-xlarge {
+ margin-top: 30px;
+ }
+ &-xxlarge {
+ margin-top: 35px;
+ }
+ }
+ &-right {
+ &-xxsmall {
+ margin-right: 5px;
+ }
+ &-xsmall {
+ margin-right: 10px;
+ }
+ &-small {
+ margin-right: 15px;
+ }
+ &-medium {
+ margin-right: 20px;
+ }
+ &-large {
+ margin-right: 25px;
+ }
+ &-xlarge {
+ margin-right: 30px;
+ }
+ &-xxlarge {
+ margin-right: 35px;
+ }
+ }
+ &-bottom {
+ &-xxsmall {
+ margin-bottom: 5px;
+ }
+ &-xsmall {
+ margin-bottom: 10px;
+ }
+ &-small {
+ margin-bottom: 15px;
+ }
+ &-medium {
+ margin-bottom: 20px;
+ }
+ &-large {
+ margin-bottom: 25px;
+ }
+ &-xlarge {
+ margin-bottom: 30px;
+ }
+ &-xxlarge {
+ margin-bottom: 35px;
+ }
+ }
+ &-left {
+ &-xxsmall {
+ margin-left: 5px;
+ }
+ &-xsmall {
+ margin-left: 10px;
+ }
+ &-small {
+ margin-left: 15px;
+ }
+ &-medium {
+ margin-left: 20px;
+ }
+ &-large {
+ margin-left: 25px;
+ }
+ &-xlarge {
+ margin-left: 30px;
+ }
+ &-xxlarge {
+ margin-left: 35px;
+ }
+ }
+ }
+
+ &.padding {
+ &-xxsmall {
+ padding: 5px;
+ }
+ &-xsmall {
+ padding: 10px;
+ }
+ &-small {
+ padding: 15px;
+ }
+ &-medium {
+ padding: 20px;
+ }
+ &-large {
+ padding: 25px;
+ }
+ &-xlarge {
+ padding: 30px;
+ }
+ &-xxlarge {
+ padding: 35px;
+ }
+ &-top {
+ &-xxsmall {
+ padding-top: 5px;
+ }
+ &-xsmall {
+ padding-top: 10px;
+ }
+ &-small {
+ padding-top: 15px;
+ }
+ &-medium {
+ padding-top: 20px;
+ }
+ &-large {
+ padding-top: 25px;
+ }
+ &-xlarge {
+ padding-top: 30px;
+ }
+ &-xxlarge {
+ padding-top: 35px;
+ }
+ }
+
+ &-right {
+ &-xxsmall {
+ padding-right: 5px;
+ }
+ &-xsmall {
+ padding-right: 10px;
+ }
+ &-small {
+ padding-right: 15px;
+ }
+ &-medium {
+ padding-right: 20px;
+ }
+ &-large {
+ padding-right: 25px;
+ }
+ &-xlarge {
+ padding-right: 30px;
+ }
+ &-xxlarge {
+ padding-right: 35px;
+ }
+ }
+ &-bottom {
+ &-xxsmall {
+ padding-bottom: 5px;
+ }
+ &-xsmall {
+ padding-bottom: 10px;
+ }
+ &-small {
+ padding-bottom: 15px;
+ }
+ &-medium {
+ padding-bottom: 20px;
+ }
+ &-large {
+ padding-bottom: 25px;
+ }
+ &-xlarge {
+ padding-bottom: 30px;
+ }
+ &-xxlarge {
+ padding-bottom: 35px;
+ }
+ }
+ &-left {
+ &-xxsmall {
+ padding-left: 5px;
+ }
+ &-xsmall {
+ padding-left: 10px;
+ }
+ &-small {
+ padding-left: 15px;
+ }
+ &-medium {
+ padding-left: 20px;
+ }
+ &-large {
+ padding-left: 25px;
+ }
+ &-xlarge {
+ padding-left: 30px;
+ }
+ &-xxlarge {
+ padding-left: 35px;
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/tables/_index.scss b/src/styles/hubl-framework/tables/_index.scss
new file mode 100644
index 0000000..f3f751a
--- /dev/null
+++ b/src/styles/hubl-framework/tables/_index.scss
@@ -0,0 +1,5 @@
+@import 'tables';
+@import 'cells';
+@import 'headers';
+@import 'bodies';
+@import 'sizes';
diff --git a/src/styles/hubl-framework/tables/bodies.scss b/src/styles/hubl-framework/tables/bodies.scss
new file mode 100644
index 0000000..1df0b82
--- /dev/null
+++ b/src/styles/hubl-framework/tables/bodies.scss
@@ -0,0 +1,22 @@
+.table-body {
+ display: table-row-group;
+ border-left: 1px solid #C9C8C8;
+
+ &>div {
+ display: contents;
+
+ &>solid-display {
+ display: table-row;
+
+ &>div {
+ display: contents;
+
+ &>.table-cell {
+ border-bottom: 1px solid #C9C8C8;
+ border-right: 1px solid #C9C8C8;
+ height: 64px;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/tables/cells.scss b/src/styles/hubl-framework/tables/cells.scss
new file mode 100644
index 0000000..f72f41b
--- /dev/null
+++ b/src/styles/hubl-framework/tables/cells.scss
@@ -0,0 +1,6 @@
+.table-cell {
+ display: table-cell;
+ white-space: nowrap;
+ text-align: center;
+ vertical-align: middle;
+}
diff --git a/src/styles/hubl-framework/tables/headers.scss b/src/styles/hubl-framework/tables/headers.scss
new file mode 100644
index 0000000..bda2de4
--- /dev/null
+++ b/src/styles/hubl-framework/tables/headers.scss
@@ -0,0 +1,20 @@
+.table-header {
+ display: table-header-group;
+ text-align: center;
+ vertical-align: middle;
+ border-top: 1px solid #C9C8C8;
+ border-bottom: 1px solid #C9C8C8;
+ border-left: 1px solid #C9C8C8;
+ font-size: 16px;
+ font-weight: 600;
+ letter-spacing: 0.25px;
+
+ &>.table-cell {
+ height: 50px;
+ border-right: 1px solid white;
+
+ &:last-child {
+ border-right: 1px solid #C9C8C8;
+ }
+ }
+}
diff --git a/src/styles/hubl-framework/tables/sizes.scss b/src/styles/hubl-framework/tables/sizes.scss
new file mode 100644
index 0000000..155887e
--- /dev/null
+++ b/src/styles/hubl-framework/tables/sizes.scss
@@ -0,0 +1,22 @@
+.table-body,
+.table-header {
+
+ .w280 {
+ width: 280px;
+ }
+ .w450 {
+ width: 450px;
+ }
+ .w370 {
+ width: 370px;
+ }
+ .w230 {
+ width: 230px;
+ }
+ .w70 {
+ width: 70px;
+ }
+ .w162 {
+ width: 162px;
+ }
+}
diff --git a/src/styles/hubl-framework/tables/tables.scss b/src/styles/hubl-framework/tables/tables.scss
new file mode 100644
index 0000000..71aeaa4
--- /dev/null
+++ b/src/styles/hubl-framework/tables/tables.scss
@@ -0,0 +1,14 @@
+.table-wrapper {
+ overflow: auto;
+ position: relative;
+ width: 100%;
+
+ .table {
+ border-collapse: collapse;
+ display: table;
+ overflow: auto;
+ table-layout: fixed;
+ width: 100%;
+ max-width: 100%;
+ }
+}
diff --git a/src/styles/hubl-framework/tags/_index.scss b/src/styles/hubl-framework/tags/_index.scss
new file mode 100644
index 0000000..5267fcf
--- /dev/null
+++ b/src/styles/hubl-framework/tags/_index.scss
@@ -0,0 +1,83 @@
+.tag {
+ cursor: pointer;
+ height: 17px;
+ font-size: 12px;
+ letter-spacing: 0.24px;
+ line-height: 17px;
+ border: 1px solid var(--color-primary);
+ border-radius: 3px;
+ padding: 4px 11px;
+
+ &.beta {
+ font-size: 14px;
+ font-weight: 600;
+ }
+
+ &.color-primary {
+ background: white;
+ border: 1px solid var(--color-primary);
+ color: var(--color-primary);
+
+ &.hover:hover {
+ background: var(--color-primary);
+ color: white;
+ }
+ }
+
+ &.color-secondary {
+ background: white;
+ border: 1px solid var(--color-secondary);
+ color: var(--color-secondary);
+
+ &.hover:hover {
+ background: var(--color-secondary);
+ color: white;
+ }
+ }
+
+ &.color-third {
+ background: white;
+ border: 1px solid var(--color-third);
+ color: var(--color-third);
+
+ &.hover:hover {
+ background: var(--color-third);
+ color: white;
+ }
+ }
+
+ &.reversed {
+ &.color-primary {
+ background: var(--color-primary);
+ border: 1px solid var(--color-primary);
+ color: white;
+
+ &.hover:hover {
+ background: white;
+ color: var(--color-primary);
+ }
+ }
+
+ &.color-secondary {
+ background: var(--color-secondary);
+ border: 1px solid var(--color-secondary);
+ color: white;
+
+ &.hover:hover {
+ background: white;
+ color: var(--color-secondary);
+ }
+ }
+
+ &.color-third {
+ background: var(--color-third);
+ border: 1px solid var(--color-third);
+ color: white;
+
+ &.hover:hover {
+ background: white;
+ color: var(--color-third);
+ }
+ }
+ }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
index bdbee89..2269e04 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,23 +1,2 @@
-@charset "UTF-8";
-
-@import '../../node_modules/include-media/dist/include-media';
-@import '../../node_modules/normalize.css/normalize';
-
-@import 'abstracts/fonts';
-@import 'abstracts/variables';
-@import 'abstracts/mixins';
-@import 'components/loader';
-@import 'components/icons/index';
-@import 'base/main';
-@import 'base/about';
-
-#viewport {
- @import 'components/index';
- @import 'layout/members/index';
- @import 'layout/job-offers/index';
- @import 'layout/user/index';
- @import 'layout/events/index';
- @import 'layout/resources/index';
- @import 'layout/dashboard/index';
- @import 'layout/polls/index';
-}
+@import 'hubl-framework/_index';
+@import 'hubl-app/_index';
diff --git a/src/styles/abstracts/_fonts.scss b/src/styles_old/abstracts/_fonts.scss
similarity index 100%
rename from src/styles/abstracts/_fonts.scss
rename to src/styles_old/abstracts/_fonts.scss
diff --git a/src/styles/abstracts/_mixins.scss b/src/styles_old/abstracts/_mixins.scss
similarity index 100%
rename from src/styles/abstracts/_mixins.scss
rename to src/styles_old/abstracts/_mixins.scss
diff --git a/src/styles/abstracts/_variables.scss b/src/styles_old/abstracts/_variables.scss
similarity index 99%
rename from src/styles/abstracts/_variables.scss
rename to src/styles_old/abstracts/_variables.scss
index 088c5ec..0bb357d 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles_old/abstracts/_variables.scss
@@ -6,6 +6,8 @@
--color-grey: #636363;
--color-heading: #2E3F58;
+ --nav-height: 72px;
+
--color-complementary: #5BB4CE;
--color-complementary-darken: #35A0C0;
diff --git a/src/styles/base/about.scss b/src/styles_old/base/about.scss
similarity index 100%
rename from src/styles/base/about.scss
rename to src/styles_old/base/about.scss
diff --git a/src/styles/base/form.scss b/src/styles_old/base/form.scss
similarity index 100%
rename from src/styles/base/form.scss
rename to src/styles_old/base/form.scss
diff --git a/src/styles/base/header.scss b/src/styles_old/base/header.scss
similarity index 100%
rename from src/styles/base/header.scss
rename to src/styles_old/base/header.scss
diff --git a/src/styles/base/main.scss b/src/styles_old/base/main.scss
similarity index 99%
rename from src/styles/base/main.scss
rename to src/styles_old/base/main.scss
index bb694f8..e6100aa 100644
--- a/src/styles/base/main.scss
+++ b/src/styles_old/base/main.scss
@@ -3,7 +3,7 @@
}
:root {
- font-size: 10px;
+ font-size: 14px;
font-family: Open Sans, sans-serif;
--sib-notifications-theme: var(--color-primary);
@@ -11,7 +11,6 @@
background-color: var(--color-main-background);
box-sizing: border-box;
color: var(--color-grey) !important;
- font-size: 14px;
/* Fix for viewport height bug in webkit for mobile */
height: -webkit-fill-available;
min-height: -webkit-fill-available;
diff --git a/src/styles/base/menu-left.scss b/src/styles_old/base/menu-left.scss
similarity index 100%
rename from src/styles/base/menu-left.scss
rename to src/styles_old/base/menu-left.scss
diff --git a/src/styles/base/table.scss b/src/styles_old/base/table.scss
similarity index 100%
rename from src/styles/base/table.scss
rename to src/styles_old/base/table.scss
diff --git a/src/styles/base/user-thumb.scss b/src/styles_old/base/user-thumb.scss
similarity index 100%
rename from src/styles/base/user-thumb.scss
rename to src/styles_old/base/user-thumb.scss
diff --git a/src/styles/components/_index.scss b/src/styles_old/components/_index.scss
similarity index 100%
rename from src/styles/components/_index.scss
rename to src/styles_old/components/_index.scss
diff --git a/src/styles/components/chat.scss b/src/styles_old/components/chat.scss
similarity index 100%
rename from src/styles/components/chat.scss
rename to src/styles_old/components/chat.scss
diff --git a/src/styles/components/comment.scss b/src/styles_old/components/comment.scss
similarity index 100%
rename from src/styles/components/comment.scss
rename to src/styles_old/components/comment.scss
diff --git a/src/styles/components/filters.scss b/src/styles_old/components/filters.scss
similarity index 100%
rename from src/styles/components/filters.scss
rename to src/styles_old/components/filters.scss
diff --git a/src/styles/components/icons/_index.scss b/src/styles_old/components/icons/_index.scss
similarity index 100%
rename from src/styles/components/icons/_index.scss
rename to src/styles_old/components/icons/_index.scss
diff --git a/src/styles/components/icons/custom-icons.scss b/src/styles_old/components/icons/custom-icons.scss
similarity index 100%
rename from src/styles/components/icons/custom-icons.scss
rename to src/styles_old/components/icons/custom-icons.scss
diff --git a/src/styles/components/icons/icons.scss b/src/styles_old/components/icons/icons.scss
similarity index 100%
rename from src/styles/components/icons/icons.scss
rename to src/styles_old/components/icons/icons.scss
diff --git a/src/styles/components/icons/material-design-icons.scss b/src/styles_old/components/icons/material-design-icons.scss
similarity index 100%
rename from src/styles/components/icons/material-design-icons.scss
rename to src/styles_old/components/icons/material-design-icons.scss
diff --git a/src/styles/components/loader.scss b/src/styles_old/components/loader.scss
similarity index 100%
rename from src/styles/components/loader.scss
rename to src/styles_old/components/loader.scss
diff --git a/src/styles/components/project-edit-picture.scss b/src/styles_old/components/project-edit-picture.scss
similarity index 100%
rename from src/styles/components/project-edit-picture.scss
rename to src/styles_old/components/project-edit-picture.scss
diff --git a/src/styles/components/sidebar.scss b/src/styles_old/components/sidebar.scss
similarity index 100%
rename from src/styles/components/sidebar.scss
rename to src/styles_old/components/sidebar.scss
diff --git a/src/styles/components/skills.scss b/src/styles_old/components/skills.scss
similarity index 100%
rename from src/styles/components/skills.scss
rename to src/styles_old/components/skills.scss
diff --git a/src/styles/components/tags.scss b/src/styles_old/components/tags.scss
similarity index 100%
rename from src/styles/components/tags.scss
rename to src/styles_old/components/tags.scss
diff --git a/src/styles_old/index.scss b/src/styles_old/index.scss
new file mode 100644
index 0000000..bdbee89
--- /dev/null
+++ b/src/styles_old/index.scss
@@ -0,0 +1,23 @@
+@charset "UTF-8";
+
+@import '../../node_modules/include-media/dist/include-media';
+@import '../../node_modules/normalize.css/normalize';
+
+@import 'abstracts/fonts';
+@import 'abstracts/variables';
+@import 'abstracts/mixins';
+@import 'components/loader';
+@import 'components/icons/index';
+@import 'base/main';
+@import 'base/about';
+
+#viewport {
+ @import 'components/index';
+ @import 'layout/members/index';
+ @import 'layout/job-offers/index';
+ @import 'layout/user/index';
+ @import 'layout/events/index';
+ @import 'layout/resources/index';
+ @import 'layout/dashboard/index';
+ @import 'layout/polls/index';
+}
diff --git a/src/styles/layout/dashboard/_index.scss b/src/styles_old/layout/dashboard/_index.scss
similarity index 100%
rename from src/styles/layout/dashboard/_index.scss
rename to src/styles_old/layout/dashboard/_index.scss
diff --git a/src/styles/layout/dashboard/dashboard.scss b/src/styles_old/layout/dashboard/dashboard.scss
similarity index 100%
rename from src/styles/layout/dashboard/dashboard.scss
rename to src/styles_old/layout/dashboard/dashboard.scss
diff --git a/src/styles/layout/events/_index.scss b/src/styles_old/layout/events/_index.scss
similarity index 100%
rename from src/styles/layout/events/_index.scss
rename to src/styles_old/layout/events/_index.scss
diff --git a/src/styles/layout/events/events.scss b/src/styles_old/layout/events/events.scss
similarity index 100%
rename from src/styles/layout/events/events.scss
rename to src/styles_old/layout/events/events.scss
diff --git a/src/styles/layout/job-offers/_index.scss b/src/styles_old/layout/job-offers/_index.scss
similarity index 100%
rename from src/styles/layout/job-offers/_index.scss
rename to src/styles_old/layout/job-offers/_index.scss
diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles_old/layout/job-offers/job-offers.scss
similarity index 100%
rename from src/styles/layout/job-offers/job-offers.scss
rename to src/styles_old/layout/job-offers/job-offers.scss
diff --git a/src/styles/layout/members/_index.scss b/src/styles_old/layout/members/_index.scss
similarity index 100%
rename from src/styles/layout/members/_index.scss
rename to src/styles_old/layout/members/_index.scss
diff --git a/src/styles/layout/members/member-profile.scss b/src/styles_old/layout/members/member-profile.scss
similarity index 100%
rename from src/styles/layout/members/member-profile.scss
rename to src/styles_old/layout/members/member-profile.scss
diff --git a/src/styles/layout/members/members.scss b/src/styles_old/layout/members/members.scss
similarity index 100%
rename from src/styles/layout/members/members.scss
rename to src/styles_old/layout/members/members.scss
diff --git a/src/styles/layout/polls/_index.scss b/src/styles_old/layout/polls/_index.scss
similarity index 100%
rename from src/styles/layout/polls/_index.scss
rename to src/styles_old/layout/polls/_index.scss
diff --git a/src/styles/layout/polls/polls.scss b/src/styles_old/layout/polls/polls.scss
similarity index 100%
rename from src/styles/layout/polls/polls.scss
rename to src/styles_old/layout/polls/polls.scss
diff --git a/src/styles/layout/resources/_index.scss b/src/styles_old/layout/resources/_index.scss
similarity index 100%
rename from src/styles/layout/resources/_index.scss
rename to src/styles_old/layout/resources/_index.scss
diff --git a/src/styles/layout/resources/resources.scss b/src/styles_old/layout/resources/resources.scss
similarity index 100%
rename from src/styles/layout/resources/resources.scss
rename to src/styles_old/layout/resources/resources.scss
diff --git a/src/styles/layout/user/_index.scss b/src/styles_old/layout/user/_index.scss
similarity index 100%
rename from src/styles/layout/user/_index.scss
rename to src/styles_old/layout/user/_index.scss
diff --git a/src/styles/layout/user/messages.scss b/src/styles_old/layout/user/messages.scss
similarity index 100%
rename from src/styles/layout/user/messages.scss
rename to src/styles_old/layout/user/messages.scss
diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug
index fce9844..f959b0e 100644
--- a/src/views/project/page-project-profile.pug
+++ b/src/views/project/page-project-profile.pug
@@ -9,7 +9,7 @@ solid-router(default-route='project-profile', hidden)
template
solid-link(data-src='\${value}', next='messages')
- .content-box__info.flex
+ .content-box__info
div#loader-project-profile.loader
div
+