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

feature: css framework page

This commit is contained in:
Jean-Baptiste Pasquier 2020-12-14 14:43:48 +01:00
parent 33ed9e27db
commit b4ab8adbb3
No known key found for this signature in database
GPG Key ID: CC04B91B949C163A
39 changed files with 55 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -107,7 +107,6 @@ On `config.json`:
"users": "http://server.url/users/" "users": "http://server.url/users/"
}, },
"post": { "post": {
"users": "http://server.url/users/",
"uploads": "http://server.url/upload/" "uploads": "http://server.url/upload/"
} }
} }

1
package.json
View File

@ -10,6 +10,7 @@
"prebuild": "rimraf build", "prebuild": "rimraf build",
"build": "NODE_ENV='production' node internal/parcel.js", "build": "NODE_ENV='production' node internal/parcel.js",
"watch": "rimraf build && node internal/parcel.js", "watch": "rimraf build && node internal/parcel.js",
"integration": "rimraf build && parcel src/hubl-framework.html",
"cypress:open": "cypress open", "cypress:open": "cypress open",
"cypress:verify": "cypress verify", "cypress:verify": "cypress verify",
"cypress:info": "cypress info", "cypress:info": "cypress info",

19
src/interactions.html → src/hubl-framework.html
View File

@ -3,26 +3,27 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaction</title> <title>Hubl Styling Framework</title>
<link rel="stylesheet" href="/styles/index.css"> <link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
<link rel="stylesheet" href="styles/hubl-framework/_index.scss">
</head> </head>
<body> <body>
<p>Avatars</p> <p>Avatars</p>
<div class="avatar xsmall"> <div class="avatar xsmall">
<object type="image/svg+xml" data="/images/alien.svg"></object> <object type="image/svg+xml" data="images/alien.svg"></object>
</div> </div>
<div class="avatar small"> <div class="avatar small">
<object type="image/svg+xml" data="/images/alien.svg"></object> <object type="image/svg+xml" data="images/alien.svg"></object>
</div> </div>
<div class="avatar"> <div class="avatar">
<object type="image/svg+xml" data="/images/alien.svg"></object> <object type="image/svg+xml" data="images/alien.svg"></object>
</div> </div>
<div class="avatar large"> <div class="avatar large">
<object type="image/svg+xml" data="/images/alien.svg"></object> <object type="image/svg+xml" data="images/alien.svg"></object>
</div> </div>
<div class="avatar xlarge"> <div class="avatar xlarge">
<object type="image/svg+xml" data="/images/alien.svg"></object> <object type="image/svg+xml" data="images/alien.svg"></object>
</div> </div>
<p>Badges</p> <p>Badges</p>
@ -111,7 +112,7 @@
<p>Tables</p> <p>Tables</p>
<div class="table-wrapper"> <div class="table-wrapper">
<div class="table"> <div class="table">
<div class="table-header bg-color-heading"> <div class="table-header bg-color-heading text-color-white">
<div class="table-cell w280">Lorem</div> <div class="table-cell w280">Lorem</div>
<div class="table-cell w280">Ipsum</div> <div class="table-cell w280">Ipsum</div>
<div class="table-cell w280">Dolor</div> <div class="table-cell w280">Dolor</div>

284
src/styles/base/buttons.scss
View File

@ -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);
}
}
}
}
}
}

9
src/styles/hubl-framework/README.md
View File

@ -1,15 +1,18 @@
# GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI ! # GAELLE VA REDIGER LA DOCUMENTATION DU CSS ICI !
Les avatars ## Les avatars
Utiliser la class `.avatar` sur un élément HTML englobant une image. 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. L'élément sera arrondi avec une hauteur et une largeur par défaut de 50px.
Les avatars peuvent avoir différentes tailles. Les avatars peuvent avoir différentes tailles.
Les badges ## Les badges
Utiliser la class `.badge` sur un élément HTML. 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; 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. Le texte et le cercle peuvent avoir différente couleurs.
Les boutons ## Les boutons
Utiliser la class `.button` sur un élément HTML. Utiliser la class `.button` sur un élément HTML.
Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs. Ils peuvent être rectangulaires avec les bords arrondis ou ronds, avec différentes couleurs.

6
src/styles/hubl-framework/_index.scss
View File

@ -1,11 +1,7 @@
@charset "UTF-8"; @charset "UTF-8";
@import '../../../node_modules/include-media/dist/include-media'; @import 'normalize.css';
@import '../../../node_modules/normalize.css/normalize';
.block {
display: block;
}
@import 'commons/_index'; @import 'commons/_index';
@import 'icons/_index'; @import 'icons/_index';
@import 'avatars/_index'; @import 'avatars/_index';

21
src/styles/hubl-framework/commons/_index.scss
View File

@ -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 'colors';
@import 'loaders'; @import 'loaders';
@import 'texts'; @import 'texts';

0
src/fonts/FacitBold.eot → src/styles/hubl-framework/fonts/FacitBold.eot
View File

0
src/fonts/FacitBold.svg → src/styles/hubl-framework/fonts/FacitBold.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 344 KiB

After

Width:  |  Height:  |  Size: 344 KiB

0
src/fonts/FacitBold.ttf → src/styles/hubl-framework/fonts/FacitBold.ttf
View File

0
src/fonts/FacitBold.woff → src/styles/hubl-framework/fonts/FacitBold.woff
View File

0
src/fonts/FacitRegular.eot → src/styles/hubl-framework/fonts/FacitRegular.eot
View File

0
src/fonts/FacitRegular.svg → src/styles/hubl-framework/fonts/FacitRegular.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 343 KiB

After

Width:  |  Height:  |  Size: 343 KiB

0
src/fonts/FacitRegular.ttf → src/styles/hubl-framework/fonts/FacitRegular.ttf
View File

0
src/fonts/FacitRegular.woff → src/styles/hubl-framework/fonts/FacitRegular.woff
View File

0
src/fonts/RefrigeratorDelxW01Bold.eot → src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.eot
View File

0
src/fonts/RefrigeratorDelxW01Bold.svg → src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 48 KiB

After

Width:  |  Height:  |  Size: 48 KiB

0
src/fonts/RefrigeratorDelxW01Bold.ttf → src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.ttf
View File

0
src/fonts/RefrigeratorDelxW01Bold.woff → src/styles/hubl-framework/fonts/RefrigeratorDelxW01Bold.woff
View File

0
src/fonts/custom-icons.eot → src/styles/hubl-framework/fonts/custom-icons.eot
View File

0
src/fonts/custom-icons.svg → src/styles/hubl-framework/fonts/custom-icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 148 KiB

0
src/fonts/custom-icons.ttf → src/styles/hubl-framework/fonts/custom-icons.ttf
View File

0
src/fonts/custom-icons.woff → src/styles/hubl-framework/fonts/custom-icons.woff
View File

0
src/fonts/material-design-icons.eot → src/styles/hubl-framework/fonts/material-design-icons.eot
View File

0
src/fonts/material-design-icons.svg → src/styles/hubl-framework/fonts/material-design-icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.0 KiB

After

Width:  |  Height:  |  Size: 9.0 KiB

0
src/fonts/material-design-icons.ttf → src/styles/hubl-framework/fonts/material-design-icons.ttf
View File

0
src/fonts/material-design-icons.woff → src/styles/hubl-framework/fonts/material-design-icons.woff
View File

0
src/fonts/material-design-icons.woff2 → src/styles/hubl-framework/fonts/material-design-icons.woff2
View File

0
src/fonts/simple-line-icons.eot → src/styles/hubl-framework/fonts/simple-line-icons.eot
View File

0
src/fonts/simple-line-icons.svg → src/styles/hubl-framework/fonts/simple-line-icons.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 111 KiB

After

Width:  |  Height:  |  Size: 111 KiB

0
src/fonts/simple-line-icons.ttf → src/styles/hubl-framework/fonts/simple-line-icons.ttf
View File

0
src/fonts/simple-line-icons.woff → src/styles/hubl-framework/fonts/simple-line-icons.woff
View File

0
src/fonts/simple-line-icons.woff2 → src/styles/hubl-framework/fonts/simple-line-icons.woff2
View File

2
src/styles/hubl-framework/icons/custom-icons.scss
View File

@ -4,7 +4,7 @@ $ci-filename: "custom-icons";
$ci-font-name: "custom-icons"; $ci-font-name: "custom-icons";
$ci-font-family: "custom-icons"; $ci-font-family: "custom-icons";
$ci-font-weight: "regular"; $ci-font-weight: "regular";
$ci-font-path: "../fonts" !default; $ci-font-path: "fonts" !default;
$ci-css-prefix: ci !default; $ci-css-prefix: ci !default;
$ci-version: "tlnzh2" !default; $ci-version: "tlnzh2" !default;

2
src/styles/hubl-framework/icons/material-design-icons.scss
View File

@ -4,7 +4,7 @@ $mdi-filename: "material-design-icons";
$mdi-font-name: "material-design-icons"; $mdi-font-name: "material-design-icons";
$mdi-font-family: "material-design-icons"; $mdi-font-family: "material-design-icons";
$mdi-font-weight: "regular"; $mdi-font-weight: "regular";
$mdi-font-path: "../fonts" !default; $mdi-font-path: "fonts" !default;
$mdi-css-prefix: mdi !default; $mdi-css-prefix: mdi !default;
$mdi-version: "3.3.92" !default; $mdi-version: "3.3.92" !default;

12
src/styles/hubl-framework/icons/simple-line-icons.scss
View File

@ -1,12 +1,12 @@
@font-face { @font-face {
font-family: 'simple-line-icons'; font-family: 'simple-line-icons';
src: url('../fonts/simple-line-icons.eot?23594131'); 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#iefix')
format('embedded-opentype'), format('embedded-opentype'),
url('../fonts/simple-line-icons.woff2?23594131') format('woff2'), url('fonts/simple-line-icons.woff2?23594131') format('woff2'),
url('../fonts/simple-line-icons.woff?23594131') format('woff'), url('fonts/simple-line-icons.woff?23594131') format('woff'),
url('../fonts/simple-line-icons.ttf?23594131') format('truetype'), url('fonts/simple-line-icons.ttf?23594131') format('truetype'),
url('../fonts/simple-line-icons.svg?23594131#simple-line-icons') url('fonts/simple-line-icons.svg?23594131#simple-line-icons')
format('svg'); format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;

19
src/styles/index.scss
View File

@ -1,24 +1,5 @@
@charset "UTF-8"; @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 { main {
background-color: pink; background-color: pink;
} }

10
src/views/page-circle.pug
View File

@ -1,15 +1,15 @@
.views-container.sidebar-is-closed .views-container.sidebar-is-closed
solid-ac-checker(permission='acl:Read', bind-resources) solid-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden, data-view="circle-chat") #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") #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") #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") #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") #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') nav.jsRightMenu(role='navigation')
solid-router.text-color-heading.text-bold(default-route='circle-chat') solid-router.text-color-heading.text-bold(default-route='circle-chat')

6
src/views/page-project.pug
View File

@ -1,11 +1,11 @@
.views-container.sidebar-is-closed .views-container.sidebar-is-closed
solid-ac-checker(permission='acl:Read', bind-resources) solid-ac-checker(permission='acl:Read', bind-resources)
#project-chat(hidden, data-view="project-chat") #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") #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") #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') nav.jsRightMenu(role='navigation')
solid-router.text-color-heading.text-bold(default-route='project-chat') solid-router.text-color-heading.text-bold(default-route='project-chat')