diff --git a/README.md b/README.md index da971e1..295763a 100644 --- a/README.md +++ b/README.md @@ -107,7 +107,6 @@ On `config.json`: "users": "http://server.url/users/" }, "post": { - "users": "http://server.url/users/", "uploads": "http://server.url/upload/" } } diff --git a/package.json b/package.json index 91443f6..302ee0f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "prebuild": "rimraf build", "build": "NODE_ENV='production' node internal/parcel.js", "watch": "rimraf build && node internal/parcel.js", + "integration": "rimraf build && parcel src/hubl-framework.html", "cypress:open": "cypress open", "cypress:verify": "cypress verify", "cypress:info": "cypress info", diff --git a/src/interactions.html b/src/hubl-framework.html similarity index 90% rename from src/interactions.html rename to src/hubl-framework.html index f2ec73f..9ca3f52 100644 --- a/src/interactions.html +++ b/src/hubl-framework.html @@ -3,26 +3,27 @@ - Interaction - - + Hubl Styling Framework + + +

Avatars

- +
- +
- +
- +
- +

Badges

@@ -111,7 +112,7 @@

Tables

-
+
Lorem
Ipsum
Dolor
diff --git a/src/styles/base/buttons.scss b/src/styles/base/buttons.scss deleted file mode 100644 index e6a4f7d..0000000 --- a/src/styles/base/buttons.scss +++ /dev/null @@ -1,284 +0,0 @@ -// Button global CSS -solid-delete, -solid-route, -solid-link, -button, -input[type='submit'], -a, -.button { - background: none; - border: none; - cursor: pointer; - display: inline-block; - padding: 0; - - &.button { - padding: 0.55rem 2.5rem; - border-radius: 100em; - - *, - & { - font-size: 1.4rem; - } - - &.mobile-full-width { - margin-bottom: 1rem; - padding-left: 5rem; - width: -webkit-fill-available; - width: -moz-available; - - @include breakpoint(lg) { - margin-bottom: 0; - padding-left: 2.5rem; - width: auto; - } - - &::before { - margin-left: -2.6rem; - - @include breakpoint(lg) { - margin-left: 0; - } - } - } - - &.desktop-btn-margin__left { - margin: 0; - - @include breakpoint(lg) { - margin-left: 2.2rem; - } - } - - &.small { - - *, - & { - font-size: 1rem; - } - } - - &.text-bold { - - *, - & { - font-weight: bold; - } - } - - &.text-uppercase { - - *, - & { - text-transform: uppercase; - } - } - - &.rounded { - border-radius: 50%; - font-size: 1.8rem; - padding: 1rem; - height: 42px; - width: 42px; - display: flex; - align-items: center; - justify-content: center; - margin: 0 auto; - } - - &.button-link { - border-radius: 100em; - - *, - & { - text-decoration: underline; - } - - &:hover { - text-decoration: none; - } - } - - &.with-icon::before { - font-size: 1.6rem; - margin-right: 1rem; - } - - &.button-primary{ - background-color: var(--color-white); - - *, - & { - color: var(--color-primary); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-primary); - } - - &:hover { - background-color: var(--color-primary); - - *, - & { - color: var(--color-white); - } - } - } - - &.button-disabled{ - cursor: not-allowed; - background-color: var(--color-white); - - *, - & { - color: var(--color-grey-3); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-grey-3); - } - - &:hover { - background-color: var(--color-white); - - *, - & { - color: var(--color-grey-3); - } - } - } - - &.button-secondary { - background-color: var(--color-white); - - *, - & { - color: var(--color-secondary); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-secondary); - } - - &:hover { - background-color: var(--color-secondary); - - *, - & { - color: var(--color-white); - } - } - } - - &.button-complementary { - color: var(--color-complementary); - background-color: var(--color-white); - - &.bordered, &.button-bordered { - border: 1px solid var(--color-complementary); - } - - &:hover { - background-color: var(--color-complementary); - color: var(--color-white); - } - } - - &.flex { - display: flex; - } - - &.reversed { - &.button-primary { - background-color: var(--color-primary); - - *, - & { - color: var(--color-white); - } - - &:hover { - background-color: var(--color-white); - color: var(--color-primary); - - *, - & { - color: var(--color-primary); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-primary); - } - } - } - - &.button-disabled{ - cursor: not-allowed; - background-color: var(--color-grey-3); - - *, - & { - color: var(--color-white); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-white); - } - - &:hover { - background-color: var(--color-grey-3); - - *, - & { - color: var(--color-white); - } - } - } - - &.button-secondary { - background-color: var(--color-secondary); - - *, - & { - color: var(--color-white); - } - - &:hover { - background-color: var(--color-white); - - *, - & { - color: var(--color-secondary); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-secondary); - } - } - } - - &.button-complementary { - background-color: var(--color-complementary); - - *, - & { - color: var(--color-white); - } - - &:hover { - background-color: var(--color-white); - - *, - & { - color: var(--color-complementary); - } - - &.bordered, &.button-bordered { - border: 1px solid var(--color-complementary); - } - } - } - } - } -} \ No newline at end of file diff --git a/src/styles/hubl-framework/README.md b/src/styles/hubl-framework/README.md index 7f98fa3..9499afb 100644 --- a/src/styles/hubl-framework/README.md +++ b/src/styles/hubl-framework/README.md @@ -1,15 +1,18 @@ # GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI ! -Les avatars +## 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 +## 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 +## 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 index 2193a70..70429ce 100644 --- a/src/styles/hubl-framework/_index.scss +++ b/src/styles/hubl-framework/_index.scss @@ -1,11 +1,7 @@ @charset "UTF-8"; -@import '../../../node_modules/include-media/dist/include-media'; -@import '../../../node_modules/normalize.css/normalize'; +@import 'normalize.css'; -.block { - display: block; -} @import 'commons/_index'; @import 'icons/_index'; @import 'avatars/_index'; diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss index 23979fd..38b8e47 100644 --- a/src/styles/hubl-framework/commons/_index.scss +++ b/src/styles/hubl-framework/commons/_index.scss @@ -1,3 +1,24 @@ +:root { + box-sizing: border-box; + color: #636363; + font-family: Open Sans, sans-serif; + font-size: 14px; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +.hidden, [hidden] { + display: none !important; +} + +.block { + display: block; +} + @import 'colors'; @import 'loaders'; @import 'texts'; diff --git a/src/fonts/FacitBold.eot b/src/styles/hubl-framework/fonts/FacitBold.eot similarity index 100% rename from src/fonts/FacitBold.eot rename to src/styles/hubl-framework/fonts/FacitBold.eot diff --git a/src/fonts/FacitBold.svg b/src/styles/hubl-framework/fonts/FacitBold.svg similarity index 100% rename from src/fonts/FacitBold.svg rename to src/styles/hubl-framework/fonts/FacitBold.svg diff --git a/src/fonts/FacitBold.ttf b/src/styles/hubl-framework/fonts/FacitBold.ttf similarity index 100% rename from src/fonts/FacitBold.ttf rename to src/styles/hubl-framework/fonts/FacitBold.ttf diff --git a/src/fonts/FacitBold.woff b/src/styles/hubl-framework/fonts/FacitBold.woff similarity index 100% rename from src/fonts/FacitBold.woff rename to src/styles/hubl-framework/fonts/FacitBold.woff diff --git a/src/fonts/FacitRegular.eot b/src/styles/hubl-framework/fonts/FacitRegular.eot similarity index 100% rename from src/fonts/FacitRegular.eot rename to src/styles/hubl-framework/fonts/FacitRegular.eot diff --git a/src/fonts/FacitRegular.svg b/src/styles/hubl-framework/fonts/FacitRegular.svg similarity index 100% rename from src/fonts/FacitRegular.svg rename to src/styles/hubl-framework/fonts/FacitRegular.svg diff --git a/src/fonts/FacitRegular.ttf b/src/styles/hubl-framework/fonts/FacitRegular.ttf similarity index 100% rename from src/fonts/FacitRegular.ttf rename to src/styles/hubl-framework/fonts/FacitRegular.ttf diff --git a/src/fonts/FacitRegular.woff b/src/styles/hubl-framework/fonts/FacitRegular.woff similarity index 100% rename from src/fonts/FacitRegular.woff rename to src/styles/hubl-framework/fonts/FacitRegular.woff diff --git a/src/fonts/RefrigeratorDelxW01Bold.eot b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot similarity index 100% rename from src/fonts/RefrigeratorDelxW01Bold.eot rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot diff --git a/src/fonts/RefrigeratorDelxW01Bold.svg b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg similarity index 100% rename from src/fonts/RefrigeratorDelxW01Bold.svg rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg diff --git a/src/fonts/RefrigeratorDelxW01Bold.ttf b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf similarity index 100% rename from src/fonts/RefrigeratorDelxW01Bold.ttf rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf diff --git a/src/fonts/RefrigeratorDelxW01Bold.woff b/src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff similarity index 100% rename from src/fonts/RefrigeratorDelxW01Bold.woff rename to src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff diff --git a/src/fonts/custom-icons.eot b/src/styles/hubl-framework/fonts/custom-icons.eot similarity index 100% rename from src/fonts/custom-icons.eot rename to src/styles/hubl-framework/fonts/custom-icons.eot diff --git a/src/fonts/custom-icons.svg b/src/styles/hubl-framework/fonts/custom-icons.svg similarity index 100% rename from src/fonts/custom-icons.svg rename to src/styles/hubl-framework/fonts/custom-icons.svg diff --git a/src/fonts/custom-icons.ttf b/src/styles/hubl-framework/fonts/custom-icons.ttf similarity index 100% rename from src/fonts/custom-icons.ttf rename to src/styles/hubl-framework/fonts/custom-icons.ttf diff --git a/src/fonts/custom-icons.woff b/src/styles/hubl-framework/fonts/custom-icons.woff similarity index 100% rename from src/fonts/custom-icons.woff rename to src/styles/hubl-framework/fonts/custom-icons.woff diff --git a/src/fonts/material-design-icons.eot b/src/styles/hubl-framework/fonts/material-design-icons.eot similarity index 100% rename from src/fonts/material-design-icons.eot rename to src/styles/hubl-framework/fonts/material-design-icons.eot diff --git a/src/fonts/material-design-icons.svg b/src/styles/hubl-framework/fonts/material-design-icons.svg similarity index 100% rename from src/fonts/material-design-icons.svg rename to src/styles/hubl-framework/fonts/material-design-icons.svg diff --git a/src/fonts/material-design-icons.ttf b/src/styles/hubl-framework/fonts/material-design-icons.ttf similarity index 100% rename from src/fonts/material-design-icons.ttf rename to src/styles/hubl-framework/fonts/material-design-icons.ttf diff --git a/src/fonts/material-design-icons.woff b/src/styles/hubl-framework/fonts/material-design-icons.woff similarity index 100% rename from src/fonts/material-design-icons.woff rename to src/styles/hubl-framework/fonts/material-design-icons.woff diff --git a/src/fonts/material-design-icons.woff2 b/src/styles/hubl-framework/fonts/material-design-icons.woff2 similarity index 100% rename from src/fonts/material-design-icons.woff2 rename to src/styles/hubl-framework/fonts/material-design-icons.woff2 diff --git a/src/fonts/simple-line-icons.eot b/src/styles/hubl-framework/fonts/simple-line-icons.eot similarity index 100% rename from src/fonts/simple-line-icons.eot rename to src/styles/hubl-framework/fonts/simple-line-icons.eot diff --git a/src/fonts/simple-line-icons.svg b/src/styles/hubl-framework/fonts/simple-line-icons.svg similarity index 100% rename from src/fonts/simple-line-icons.svg rename to src/styles/hubl-framework/fonts/simple-line-icons.svg diff --git a/src/fonts/simple-line-icons.ttf b/src/styles/hubl-framework/fonts/simple-line-icons.ttf similarity index 100% rename from src/fonts/simple-line-icons.ttf rename to src/styles/hubl-framework/fonts/simple-line-icons.ttf diff --git a/src/fonts/simple-line-icons.woff b/src/styles/hubl-framework/fonts/simple-line-icons.woff similarity index 100% rename from src/fonts/simple-line-icons.woff rename to src/styles/hubl-framework/fonts/simple-line-icons.woff diff --git a/src/fonts/simple-line-icons.woff2 b/src/styles/hubl-framework/fonts/simple-line-icons.woff2 similarity index 100% rename from src/fonts/simple-line-icons.woff2 rename to src/styles/hubl-framework/fonts/simple-line-icons.woff2 diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss index 7c51b64..e69e85d 100644 --- a/src/styles/hubl-framework/icons/custom-icons.scss +++ b/src/styles/hubl-framework/icons/custom-icons.scss @@ -4,7 +4,7 @@ $ci-filename: "custom-icons"; $ci-font-name: "custom-icons"; $ci-font-family: "custom-icons"; $ci-font-weight: "regular"; -$ci-font-path: "../fonts" !default; +$ci-font-path: "fonts" !default; $ci-css-prefix: ci !default; $ci-version: "tlnzh2" !default; diff --git a/src/styles/hubl-framework/icons/material-design-icons.scss b/src/styles/hubl-framework/icons/material-design-icons.scss index 2793d84..baa0a20 100644 --- a/src/styles/hubl-framework/icons/material-design-icons.scss +++ b/src/styles/hubl-framework/icons/material-design-icons.scss @@ -4,7 +4,7 @@ $mdi-filename: "material-design-icons"; $mdi-font-name: "material-design-icons"; $mdi-font-family: "material-design-icons"; $mdi-font-weight: "regular"; -$mdi-font-path: "../fonts" !default; +$mdi-font-path: "fonts" !default; $mdi-css-prefix: mdi !default; $mdi-version: "3.3.92" !default; diff --git a/src/styles/hubl-framework/icons/simple-line-icons.scss b/src/styles/hubl-framework/icons/simple-line-icons.scss index dee247e..0a33c85 100644 --- a/src/styles/hubl-framework/icons/simple-line-icons.scss +++ b/src/styles/hubl-framework/icons/simple-line-icons.scss @@ -1,12 +1,12 @@ @font-face { font-family: 'simple-line-icons'; - src: url('../fonts/simple-line-icons.eot?23594131'); - src: url('../fonts/simple-line-icons.eot?23594131#iefix') + src: url('fonts/simple-line-icons.eot?23594131'); + src: url('fonts/simple-line-icons.eot?23594131#iefix') format('embedded-opentype'), - url('../fonts/simple-line-icons.woff2?23594131') format('woff2'), - url('../fonts/simple-line-icons.woff?23594131') format('woff'), - url('../fonts/simple-line-icons.ttf?23594131') format('truetype'), - url('../fonts/simple-line-icons.svg?23594131#simple-line-icons') + url('fonts/simple-line-icons.woff2?23594131') format('woff2'), + url('fonts/simple-line-icons.woff?23594131') format('woff'), + url('fonts/simple-line-icons.ttf?23594131') format('truetype'), + url('fonts/simple-line-icons.svg?23594131#simple-line-icons') format('svg'); font-weight: normal; font-style: normal; diff --git a/src/styles/index.scss b/src/styles/index.scss index 696e9cf..068550f 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,24 +1,5 @@ @charset "UTF-8"; -@import 'normalize.css'; - -:root { - box-sizing: border-box; - color: #636363; - font-family: Open Sans, sans-serif; - font-size: 14px; -} - -*, -*:before, -*:after { - box-sizing: inherit; -} - -.hidden, [hidden] { - display: none !important; -} - main { background-color: pink; } diff --git a/src/views/page-circle.pug b/src/views/page-circle.pug index 3c39c57..53d1a8f 100644 --- a/src/views/page-circle.pug +++ b/src/views/page-circle.pug @@ -1,15 +1,15 @@ .views-container.sidebar-is-closed solid-ac-checker(permission='acl:Read', bind-resources) #circle-chat(hidden, data-view="circle-chat") - include views/circle/page-circle-chat.pug + include partials/circle/page-circle-chat.pug #circle-information.content-box__height(hidden, data-view="circle-information") - include views/circle/page-circle-profile.pug + include partials/circle/page-circle-profile.pug #circle-events(hidden, data-view="circle-events") - include views/circle/page-circle-events.pug + include partials/circle/page-circle-events.pug #circle-resources(hidden, data-view="circle-resources") - include views/circle/page-circle-resources.pug + include partials/circle/page-circle-resources.pug #circle-polls(hidden, data-view="circle-polls") - include views/circle/page-circle-polls.pug + include partials/circle/page-circle-polls.pug nav.jsRightMenu(role='navigation') solid-router.text-color-heading.text-bold(default-route='circle-chat') diff --git a/src/views/page-project.pug b/src/views/page-project.pug index 13b40a3..be8e8b8 100644 --- a/src/views/page-project.pug +++ b/src/views/page-project.pug @@ -1,11 +1,11 @@ .views-container.sidebar-is-closed solid-ac-checker(permission='acl:Read', bind-resources) #project-chat(hidden, data-view="project-chat") - include views/project/page-project-chat.pug + include partials/project/page-project-chat.pug #project-information(hidden, data-view="project-information") - include views/project/page-project-profile.pug + include partials/project/page-project-profile.pug #project-picture(hidden, data-view="project-picture") - include views/project/page-project-picture.pug + include partials/project/page-project-picture.pug nav.jsRightMenu(role='navigation') solid-router.text-color-heading.text-bold(default-route='project-chat')