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/"
|
||||
},
|
||||
"post": {
|
||||
"users": "http://server.url/users/",
|
||||
"uploads": "http://server.url/upload/"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -3,26 +3,27 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Interaction</title>
|
||||
<link rel="stylesheet" href="/styles/index.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.5.5/css/simple-line-icons.min.css">
|
||||
<title>Hubl Styling Framework</title>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap">
|
||||
<link rel="stylesheet" href="styles/hubl-framework/_index.scss">
|
||||
</head>
|
||||
<body>
|
||||
<p>Avatars</p>
|
||||
<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 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 class="avatar">
|
||||
<object type="image/svg+xml" data="/images/alien.svg"></object>
|
||||
<object type="image/svg+xml" data="images/alien.svg"></object>
|
||||
</div>
|
||||
<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 class="avatar xlarge">
|
||||
<object type="image/svg+xml" data="/images/alien.svg"></object>
|
||||
<object type="image/svg+xml" data="images/alien.svg"></object>
|
||||
</div>
|
||||
|
||||
<p>Badges</p>
|
||||
@ -111,7 +112,7 @@
|
||||
<p>Tables</p>
|
||||
<div class="table-wrapper">
|
||||
<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">Ipsum</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 !
|
||||
|
||||
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.
|
||||
|
||||
@ -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';
|
||||
|
||||
@ -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';
|
||||
|
||||
|
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-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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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')
|
||||
|
||||
@ -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')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user