feature: css framework page
This commit is contained in:
Jean-Baptiste Pasquier
parent
33ed9e27db
commit
b4ab8adbb3
@ -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/"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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",
|
||||||
|
|||||||
@ -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>
|
||||||
@ -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);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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.
|
||||||
|
|||||||
@ -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';
|
||||||
|
|||||||
@ -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';
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 344 KiB After Width: | Height: | Size: 344 KiB |
|
Before Width: | Height: | Size: 343 KiB After Width: | Height: | Size: 343 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 48 KiB |
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 148 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 111 KiB After Width: | Height: | Size: 111 KiB |
@ -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;
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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')
|
||||||
|
|||||||
@ -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')
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user